Default 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" 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

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.

Default Popover

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Static Demo

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>

Colored Title Popover

A demonstration of colored title background of popover available in all four directions.

Static Demo

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.

Colored Body Popover

A demonstration of colored body background of popover available in all four directions.

Static Demo

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.