VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/popovers-in-bootstrap-with-examples/

⇱ Popovers in bootstrap with examples - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Popovers in bootstrap with examples

Last Updated : 28 Apr, 2022

A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element. In the popover, if you click on any element that you include in your script, it will give a particular message as a popover and you can see your message as you defined in the script. 

It is easy to implement popovers on a website using Bootstrap as you just need to define a few attributes for the element as described below:

Syntax: 

data-toggle="popover" 
title="Popover Header" 
data-content="Some content inside the box"

The data-toggle attribute defines the Popover, the title attribute defines the Tile for the Popover and the data-content attribute is used to store the content to be displayed in the respective Popover.

Include the below javascript in your code to make it work.

Example:

Output:

👁 Image

Different types of Popover orientation in Bootstrap:

  • Top Alignment: In this type of popover alignment, the popover content is displayed at the top of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = "top".

Output:

👁 Image

  • Left Alignment: In this type of popover alignment, the popover content is displayed at the left of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = "left".

Output:

👁 Image

  • Right Alignment: In this type of popover alignment, the popover content is displayed at the top of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = "right".

Output:

👁 Image

  • Bottom Alignment: In this type of popover alignment, the popover content is displayed at the bottom of the element on which we have applied this attribute. To align the popover to the top, assign an attribute data-placement = "bottom".

Output:

👁 Image

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari
Comment
Article Tags:

Explore