Documentation and examples for adding tooltips & popovers, like those found in iOS, to any element on your site.
Four options are available: top, right, bottom, and left aligned.
Static Demo
Live Demo
Source Code
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Hover me
</button>Required Attributes
| Attribute | Value |
|---|---|
data-placement="[value]" |
top | bottom | left | right |
title="[value]" |
Any title value that you have in mind. |
Colored tooltip. Four options are available: top, right, bottom, and left aligned.
Static Demo
Live Demo
Source Code
<button type="button" class="btn btn-secondary" data-toggle="tooltip-primary" data-placement="top" title="Tooltip on top">
Hover me
</button>Required Attributes
| Attribute | Value |
|---|---|
data-toggle="tooltip-[value]" |
primary | success | warning | danger | info | indigo | purple | orange | teal | pink |
data-placement="[value]" |
top | bottom | left | right |
title="[value]" |
Any title value that you have in mind. |
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Static Demo
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Live Demo
Source Code
<button type="button" class="btn btn-secondary"
data-container="body" data-toggle="popover" data-popover-color="default" data-placement="top" title="Popover top"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Click me</button>A demonstration of colored title background of popover available in all four directions.
Static Demo
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Live Demo
Source Code
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
data-popover-color="head-primary" data-placement="top" title="Popover top"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Click me
</button>Required Attributes
| Attribute | Value |
|---|---|
data-popover-color="head-[value]" |
primary | success | warning | danger | info | indigo | purple | orange | teal | pink | dark |
data-placement="[value]" |
top | bottom | left | right |
title="[value]" |
Any title value that you have in mind. |
data-content="[value]" |
Any content value that you have in mind. |
A demonstration of colored body background of popover available in all four directions.
Static Demo
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Live Demo
Source Code
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
data-popover-color="primary" data-placement="top" title="Popover top"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Click me
</button>Required Attributes
| Attribute | Value |
|---|---|
data-popover-color="[value]" |
primary | success | warning | danger | info | indigo | purple | orange | teal | pink | dark |
data-placement="[value]" |
top | bottom | left | right |
title="[value]" |
Any title value that you have in mind. |
data-content="[value]" |
Any content value that you have in mind. |