developer82 developer82 - 1 year ago 201
CSS Question

Bootstrap static popover

In the bootstrap popover documentation ( they show on the page the the popover looks like in a static way (before the example where it's connected to the buttons).

I would like to show a popover on my page as an explanation to something on my site - but would like it to always show, without the user having to click anything.

how can I show a static popover like they do? couldn't find an option.


Answer Source

If you inspect the HTML that Bootstrap use in their examples they've simply removed the fade class from the HTML element and then overriden a few of the default styles.


<div class="popover-example"> <!-- NEW -->
  <div class="popover top">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover top</h3>
    <div class="popover-content">
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>


.popover-example .popover {
  position: relative;
  display: block;
  margin: 20px;