gtilflm gtilflm - 3 years ago 327
CSS Question

Bootstrap Popover Width and jQuery OnFocus

I have an input field that I want to show a popover for 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>


Then here's the jQuery that makes it show up onfocus...

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


I'd like to make this popover wider without changing all popovers in the bootstrap css file. I've looked at other solutions and I can't seem to figure it out.

Answer Source

Bootstrap 4-Beta version

I won't pretend this is optimal, but if you don't want to go the template route, this seems to work (jsFiddle):

Triggering button

<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' });
});

In this example, I'm overriding the max-width rule, but obviously you can change that to whatever you're trying to accomplish.

This seems to only work with shown.bs.popover, which makes sense; there's no generated markup to style until show.bs.popover has resolved.

Adding a .popover('update') seems to fix the position bug: 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 Version

Bootstrap 3 doesn't work quite the same (probably due at least in part because they use an external library, Popper.js, for Bootstrap 4), so the above won't work. Here's a Bootstrap 3 version that uses the template option and a custom class:

Template

<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>

Markup

<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;
}

Script

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

I did slightly tweak your options, since the jsFiddle iframes don't seem to work quite right with the top position: https://jsfiddle.net/5ua15n21/3/

@DanielSixl's answer would work if you were using Bootstrap 4, but the markup for popovers is a little different in Bootstrap 3. I also prefer to use a template script tag, but you could hard-code the string instead.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download