[英]Bootstrap popover position and placement and tip
如何设置自举弹出窗口,以使其在调整窗口大小时不会从触发元素浮起?
需要使用什么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>
我不喜欢它的工作方式,但是从本质上讲,您必须创建一个元素,使其停留在所需的弹出框位置,然后将弹出框附加到该位置。 在这种情况下,我使用了已经存在的工具提示html容器。 我正在动态创建容器ID,因此您不必担心在html中这样做。
因此,对于此HTML:
<div class="form-group pos-relative">
<label for="ref">Reference</label>
<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50">
<span 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>
</span>
</div>
此CSS:
.pos-relative{
position:relative;
}
.js-tooltip{
position:absolute;
top:0;
right:0;
}
而这个JS-发生的地方是:
$(function () {
$('.js-tooltip-trigger').each(function(ind, ele){
var $ele = $(ele),
$ttSpan = $ele.next('.js-tooltip'),
ttHtml = $ttSpan.html(),
rndID = 'ttid'+ String(Math.random()).substr(2);
// set the ID, strip the style, and empty the html--
// we already have it stored in the var above
$ttSpan.attr('id', rndID).removeAttr('style').html('');
// make the popovers
$ele.popover({
html: true,
trigger: 'focus',
placement: 'right',
container: '#'+rndID,
content: ttHtml
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.