Question

I am trying to figure out what CSS classes to use to have Bootstrap popovers like this:

The example above is similar to the first example in the bootstrap documentation.

How can I get a popover like the one above working on a div element using only markup, and without needing javascript calls and clicks?

Answer 1

The HTML that will render the popover looks something like this:

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

However, by default, .popup is display: none so you may want to override; in this case, I added a class popover-example and will define the following additional CSS:

.popover.popover-example {
    display: block
}