你如何定位引导弹出窗口,以便在窗口调整大小时它不会从触发元素浮动?
什么css需要应用于将尖端移动到弹出窗口的顶部边缘,即靠近角落?
我有以下选项设置,但它将弹出窗口放在左侧而不是右侧 .
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
placement: 'auto right',
content: function (e) {
return $(this).parent(".form-group").find(".js-tooltip").html();
}
}).on('shown.bs.popover', function () {
$('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
});
});
html:
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>
1 回答
我不喜欢它是如何工作的,但基本上你必须创建一个保持在你想要弹出窗口的位置的元素,并将弹出窗口附加到它上面 . 在这种情况下,我使用了您已经拥有的工具提示html容器 . 我正在动态创建容器ID,因此您不必担心在HTML中执行此操作 .
对于这个HTML:
这个CSS:
这个JS - 这就是它发生的地方:
See it in action here