簡體   English   中英

Bootstrap工具提示位置(動態元素)

[英]Bootstrap Tooltip Position (Dynamic elements)

我正在嘗試將我的代碼轉換為可使用動態元素。

<li data-placement="right" data-toggle="tooltip" data-original-title="abc" title=""></li>
<li data-placement="left" data-toggle="tooltip1" data-original-title="def" title=""></li>

這是我的靜態元素代碼。 這很好用:

//For RIGHT tooltips...
$("[data-toggle=tooltip]").tooltip({
    animation: false,
    delay: {show: 0, hide: 0}
});

$("[data-toggle=tooltip]").hover(function(){
    $('.tooltip').css('left', parseInt($('.tooltip').css('left')) + 90 + 'px');
});

//For LEFT tooltips... "tooltip1"...
$("[data-toggle=tooltip1]").tooltip({
    animation: false,
    delay: {show: 0, hide: 0}
});

$("[data-toggle=tooltip1]").hover(function(){
    $('.tooltip').css('left', parseInt($('.tooltip').css('left')) - 70 + 'px');
});

到目前為止,這是我有關動態元素的代碼。 工具提示出現了,但是我不確定如何更改它的位置。

$('body').tooltip({
    selector: '[data-toggle=tooltip], [data-toggle=tooltip1]',
    animation: false,
    delay: {show: 0, hide: 0},
    placement: ????????

});

以下是一些類似的問題:

動態定位Bootstrap工具提示(用於動態生成的元素)

是否根據彈出窗口相對於窗口邊緣的X位置更改Bootstrap彈出窗口的位置?

使用引導程序,位置或偏移量由HTML文檔中元素的屬性管理。 其“數據放置”屬性。

<div class="coolClass" id="coolDiv" data-placement="left" data-toggle="tooltip" 
title="Left ToolTip">
    <p>Left Tooltip</p>
</div>

這有助於我定位工具提示。 不需要JS

.tooltip.right {
    margin-left: 60px;
}

.tooltip.left {
    margin-left: -40px;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM