Tooltip Popover
LeptonX uses
Bootstrap Tooltip's
and
Bootstrap Popover's
component's latest versions.
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on
your site.
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3
for animations and data-bs-attributes for local title storage.
Popover Example
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
Preview
HTML
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="top"
data-bs-content="Top popover"
>
Popover on top
</button>
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="right"
data-bs-content="Right popover"
>
Popover on right
</button>
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-content="Bottom popover"
>
Popover on bottom
</button>
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="left"
data-bs-content="Left popover"
>
Popover on left
</button>
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-container="body"
data-bs-toggle="popover"
data-bs-placement="left"
data-bs-content="<em>Popover</em> <u>with</u> <b>HTML</b>"
data-bs-html="true"
>
Popover with HTML
</button>
Tooltip Example
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
Preview
HTML
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Tooltip on top"
>
Tooltip on top
</button>
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Tooltip on right"
>
Tooltip on right
</button>
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="Tooltip on bottom"
>
Tooltip on bottom
</button>
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-toggle="tooltip"
data-bs-placement="left"
title="Tooltip on left"
>
Tooltip on left
</button>
<button
type="button"
class="btn btn-secondary mb-1"
data-bs-toggle="tooltip"
data-bs-html="true"
title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
>
Tooltip with HTML
</button>
