Bootstrap Popover Width和jQuery OnFocus

Question

我有一个输入字段，我想为onfocus显示一个弹出框...

<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文件中的所有弹出框的情况下使这个popover更宽。我已经看过其他解决方案了，我似乎无法弄明白。

Answer 1

使用附加类的模板变体：

$('.popover_onfocus_variation').popover({
    trigger: "focus",
    template: '<div class="popover popover--variation" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

使用此课程，您可以使用带有变体的弹出窗口。例如，加倍宽度。您必须在此处使用max-width：

.popover--variation {
   max-width: 512px;
}

这是一个codepen： https://codepen.io/Sixl/pen/LzLwKx?editors=1111

Answer 2

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不能完全相同（可能至少部分是因为它们使用外部库，Popper.js，用于Bootstrap 4），因此上述操作无效。这是一个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中弹出窗口的标记稍有不同。我也更喜欢使用模板脚本标记，但您可以对字符串进行硬编码。