Bootstrap 4 Popover

Popover

A popover is similar to the tooltip. The only difference between tooltip and Popover is that in the tooltip, the popup box appears when you move the cursor over the element or link. In the Popover, the popup box appears when you click on the element. The Popover also contains more content than the tooltip.

Steps for creating Popover

  • Add the data-toggle=”popover” attribute to the <a> element.
  • Add the title attribute to the <a> to add the title or header in the popup box.
  • Add the data-content attribute to the <a>, which is used to add content such as paragraph, sentence, etc. to the popup box.

Example

Output

popover.PNG

Positioning Popovers – The default position of the popover is the right side of the element. You can set the position of the popover on your own to the left, right, top, and bottom with the help of data-placement attribute.

  • To set the position of the popover to the left, add the data-placement=”left” attribute.
  • To set the position of the popover to the right, add the data-placement=”right” attribute.
  • To set the position of the popover at the top, add the data-placement=”top” attribute.
  • To set the position of the popover at the bottom, add the data-placement=”bottom” attribute.

Note: Sometimes the popover will not work properly because of small space. If you set the data-placement value “top” and there is no proper space for the popover on the top of the element then the popover will appear on the bottom of the element.

Example

Output

popover1.PNG

Closing Popover – The popover disappears when you click on the element. Add the data-trigger=”focus” attribute, this feature allows you to click anywhere on the screen to make the popover disappear and also enhance the user experience.

Example

Output

popover2.PNG

Note: You can also make you popover visible when you move cursor over the element. For this, add the data-trigger=”hover” attribute to the <a> element.

Example

Output

popover3.PNG

Pin It on Pinterest

Share This