jquery - Bootstrap Popover 宽度和 jQuery OnFocus

Question

我有一个输入字段，我想在焦点上显示一个弹出窗口...

<input class="form-control popover_onfocus" type="text" name="username" id="username" placeholder="Username" value="<?php if (!$form_valid && !empty($_POST)){ echo $username;} ?>" data-toggle="popover" data-placement="top" data-content="Your student can login with this or his/her email address if you provide one." required autofocus>

然后这是让它在焦点上显示的 jQuery...

$('.popover_onfocus').popover({
    trigger: "focus"
});

我想让这个弹出窗口更宽，而不更改 Bootstrap css 文件中的所有弹出窗口。我看过其他解决方案，但似乎无法弄清楚。

Answer 1

Bootstrap 4-Beta 版本

我不会假装这是最佳的，但如果您不想走模板路线，this seems to work (jsFiddle) :

触发按钮

<input class="form-control popover_onfocus" 
       type="text" 
       name="username" 
       id="username" 
       placeholder="Username" 
       value="" 
       data-toggle="popover" 
       data-placement="top" 
       data-content="And here's some amazing content. It's very engaging. Right? And here's some amazing content. It's very engaging. Right? And here's some amazing content. It's very engaging. Right?" required autofocus />

Javascript

$('.popover_onfocus').popover({
    trigger: 'focus'
}).on('shown.bs.popover', function() {
    $('body .popover').css({ 'max-width': '800px' });
});

在此示例中，我将覆盖最大宽度规则，但显然您可以将其更改为您想要实现的任何目标。

这似乎只适用于 shown.bs.popover，这是有道理的；在 show.bs.popover 解析之前，不会生成样式标记。

添加 .popover('update') 似乎可以修复位置错误:https://jsfiddle.net/5ua15n21/2/

$('.popover_onfocus').popover({
    trigger: 'focus'
}).on('shown.bs.popover', function() {
    $('body .popover').css({ 'max-width': '800px' }).popover('update');
});

<小时/>

Bootstrap 3 版本

Bootstrap 3 的工作方式不太一样(可能至少部分是因为他们为 Bootstrap 4 使用了外部库 Popper.js)，所以上面的方法不起作用。这是使用模板选项和自定义类的 Bootstrap 3 版本:

模板

<script type="text/template" id="popover-template">
<div class="popover popover-wide"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>
</script>

标记

<input class="form-control popover_onfocus" 
       type="text" 
       name="username" 
       id="username" 
       placeholder="Username" 
       value="" 
       data-toggle="popover" 
       data-placement="bottom" 
       data-content="And here's some amazing content. It's very engaging. Right? And here's some amazing content. It's very engaging. Right? And here's some amazing content. It's very engaging. Right?" required autofocus />

CSS

.popover.popover-wide
{
  max-width: 800px;
}

脚本

$('.popover_onfocus').popover({
    trigger: 'focus',
    template: $('#popover-template').html()
});

我稍微调整了你的选项，因为 jsFiddle iframe 似乎不太适合 top 位置:https://jsfiddle.net/5ua15n21/3/

如果您使用 Bootstrap 4，@DanielSixl 的答案会起作用，但是 Bootstrap 3 中弹出窗口的标记有点不同。我也更喜欢使用模板脚本标记，但您可以对字符串进行硬编码。