AMP CSS Tooltips Library

Documentation and examples for adding tooltips with CSS for animations and data-attributes for local title storage: AMP CSS Tooltips Library.

AMP CSS Tooltips

Enable tooltips everywhere

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element. The tooltip text is placed inside an inline element <span> with .tooltip class.

Left | Top | Bottom | Right
<!-- Tooltip on left -->
<span class="tooltip" data-tooltip-title="..." data-tooltip-position="left">...</span>

<!-- Tooltip on top -->
<span class="tooltip" data-tooltip-title="..." data-tooltip-position="top">...</span>

<!-- Tooltip on bottom -->
<span class="tooltip" data-tooltip-title="..." data-tooltip-position="bottom">...</span>

<!-- Tooltip on right -->
<span class="tooltip" data-tooltip-title="..." data-tooltip-position="right">...</span>
Button with tooltip on hover
<!-- Tooltip on left -->
<button class="btn btn-primary tooltip" data-tooltip-title="..." data-tooltip-position="left">...</button>

<!-- Tooltip on top -->
<button class="btn btn-primary tooltip" data-tooltip-title="..." data-tooltip-position="top">...</button>

<!-- Tooltip on bottom -->
<button class="btn btn-primary tooltip" data-tooltip-title="..." data-tooltip-position="bottom">...</button>

<!-- Tooltip on right -->
<button class="btn btn-primary tooltip" data-tooltip-title="..." data-tooltip-position="right">...</button>

W3Schools tooltip documentation

Read more
We use cookies to optimize site functionality and give you the best possible experience.