How to Create Bootstrap 4 Popover.?


Share

Bootstrap 4 Popover:

the Popover components is similar to tooltips; it is a pop-up box that appears when the user clicks on an elements. The difference is that the popover can contain much more content.


How to create a Popover:

To create a popover add- data-toggle="popover" attribute to an elements. Use the site attribute to specify the header text of the popover, and use the data-content attribute to specify the text what should be displayed inside the popover's body:


Note:

Popovers must be initialized with jQuery: select the specifed element and call the popover() method. The Following code will enable all popovers in the document:



Positioning Popovers:

By degault, the popover will appear on the right side of the element. Use the data-placement attribute to set the position of the popover on top, bottom, left, or the right side of the elements:

Example :



Closing Popovers:

By default, the popover is closed when you click in the element again. However, you can use the data-trigger="focus" attribute which will close the popover when clicking outside the element:
if you want to popover to be displayed when you move the mouse pointer over he element, use the data-trigger attribute with a value of "hover":

Example :



Share Author Section