我有多个表单输入和文本字段,我希望在字段获得焦点时在其上显示弹出窗口。由于某些弹出窗口的内容可能很长,我不想在输入标记内声明内容。相反,我有以下内容:
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-tooltip-trigger" id="name" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<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>
我有以下 JavaScript
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function () {
return $(correct tool tip).html();
}
});
});
如何在上面的 JavaScript 中显示或返回正确的弹出窗口。如果我向工具提示内容添加数据属性以将其链接到每个输入字段(例如 <div class="js-tooltip" style="display:none;" data-tooltip="name">
)会怎样?然后使用一些jquery来查找并返回它。你会如何用 jquery 做到这一点?有人有更优雅的解决方案吗?
另外,如何让弹出窗口保留在输入字段中并在窗口大小调整时自动定位。目前,当我调整窗口大小时,它会飘走。
设法使用上面的 html 自己弄清楚:
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function (e) {
return $(this).parent(".form-group").find(".js-tooltip").html();
}
});
});
有人能想出更优雅的解决方案吗?
最佳答案
你可以这样做... Here is the DEMO
Jquery 部分
$(function(){
// Enabling Popover Example 1 - HTML (content and title from html tags of element)
$("[data-toggle=popover]").popover();
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$(".form-control").popover({
html : true,
content: function() {
return $('.js-tooltip').html();
},
title: function() {
return $('.js-tooltip').html();
}
});
});
HTML 部分
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-popover-trigger" id="name" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your name" >
<div class="js-tooltip" style="display: none;" id="n1">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-popover-trigger" id="ref" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your reference is optional">
<div class="js-tooltip" style="display: none;" id="t2">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>
关于javascript - Bootstrap 多个弹出框显示和放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30503604/