Skip to main content

Popovers

In fact popovers are dropdown component, make sure first you read and learn about dropdowns. FlatifyCSS uses Popper library for positioning popovers dynamically, so popovers need this library to work as expected and you should include it inside your webpage before FlatifyCSS's JavaScript file.

The same as a dropdown

The HTML structure of popover is like a dropdown as said above, for offset and special styles you can add the .popover class to the .dropdown-wrapper.

index.html
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
erat ut turpis.
<div class="dropdown-wrapper popover">
<b id="my-popover-toggle" class="dropdown-toggle" aria-expanded="false"> Click me! </b>
<div class="dropdown" aria-labelledby="my-popover-toggle">
Hello world!
<span aria-hidden="true" class="pointer-arrow" style="position: absolute; left: 93px;"></span>
</div>
</div>
Donec nec justo eget felis facilisis fermentum.
</div>