YouTipBootstrap4 Popover
# Bootstrap4 Popover
The popover component is similar to tooltips; it is shown when the user clicks on the element. The difference is that the popover can contain much more content.
* * *
## How to Create a Popover
Create a popover by adding `data-toggle="popover"` to an element.
The `title` attribute contains the popover's header text, and the `data-content` attribute contains the popover's body text:
Toggle popover
**Note:** Popovers must be initialized with jQuery: select a specified element and call the `popover()` method.
The following example will show a popover on click of the current element:
## Example
$(document).ready(function(){ $('').popover(); });
[Try it Yourself »](#)
* * *
## Specifying Popover Position
By default, the popover is displayed on the right side of the element.
Use the `data-placement` attribute to set the direction of the popover: top, bottom, left or right:
## Example
TopBottomLeftRight
[Try it Yourself »](#)
Used in buttons:
## Example
[Try it Yourself »](#)
* * *
## Closing Popovers
By default, the popover is closed when you click on the element again. You can use the `data-trigger="focus"` attribute to close the popover when clicking outside the element:
## Example
Click me
[Try it Yourself »](#)
**Tip:** If you want the popover to be displayed when you move the mouse over the element, use the `data-trigger` attribute with a value of `"hover"`:
## Example
Hover over me
[Try it Yourself »](#)