[Bootstrap 3] Customize Popovers with HTML Content And Custom Width

Popovers on Bootstrap are a handy thing to display some extra informations without overload the screen. They can not only be placed in A tag or BUTTON tag, but virtually in every tag needed.

Here are some custom options for :

  • How to display HTML in a popover ?
  • How to dismiss popover on click ?
  • How to add popover on a tag other than <a> or <button> ?

 

<tr
tabindex="0"             // Increase compatibility
role="button"            // Increase compatibility
data-trigger="focus"     // Dismiss on click wherever in the page
data-container="body"    // Display stuff
data-html="true"         // Display HTML content
data-toggle="popover"    // Our stuff!
data-placement="top"     // Popover placement (top, bottom, left, right)

data-content='
    <strong>Dernier évènement</strong><br><small>Répondu par <a href="#">Thomas</a></small>
    <hr/>
    <p>
        Ut occaecat exercitation incididunt tempor 
        sit nostrud anim esse. Consectetur sunt in officia 
        cillum fugiat duis deserunt est eiusmod sint 
        voluptate pariatur quis.
    </p>
'>
popover-html
Popover with HTML in it.

 

  • Popover with custom width :

Simply add :

.popover { max-width: 100%; }

in your CSS !

popover-maxwidth
such width!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: