Scribd
Upload
21 views2 pages

How To Create A Popover: Example

The document describes how to create and configure popovers using Bootstrap. To create a popover, add the data-toggle="popover" attribute to an element and use title and data-content attributes to specify header text and body content. Popovers must be initialized with jQuery by calling the popover() method on elements with the data-toggle attribute. Positioning is controlled with data-placement and default is right side, while data-trigger="focus" closes the popover when clicking outside.

Uploaded by

Siddharth Popat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views2 pages

How To Create A Popover: Example

The document describes how to create and configure popovers using Bootstrap. To create a popover, add the data-toggle="popover" attribute to an element and use title and data-content attributes to specify header text and body content. Popovers must be initialized with jQuery by calling the popover() method on elements with the data-toggle attribute. Positioning is controlled with data-placement and default is right side, while data-trigger="focus" closes the popover when clicking outside.

Uploaded by

Siddharth Popat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

How To Create a Popover

To create a popover, add the data-toggle="popover" attribute to an element.

Use the title attribute to specify the header text of the popover, and use the data-content attribute
to specify the text that should be displayed inside the popover's body:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the


popover">Toggle popover</a>

Note: Popovers must be initialized with jQuery: select the specified element and call
the popover() method.

The following code will enable all popovers in the document:

Example
<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();
});
</script>
Try it Yourself »

Positioning Popovers
By default, 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 element:

Example
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-
content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-
content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-
content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-
content="Content">Click</a>
Try it Yourself »

Tip: You can also use the data-placement attribute with a value of "auto", which will let the browser
decide the position of the popover. For example, if the value is "auto left", the popover will display on
the left side when possible, otherwise on the right.
Closing Popovers
By default, the popover is closed when you click on the element again. However, you can use
the data-trigger="focus" attribute which will close the popover when clicking outside the element:

Example
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-
content="Click anywhere in the document to close this popover">Click me</a>

You might also like