Google AMP Tooltips Library

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

Google AMP Tooltips

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>

Google AMP Tooltips · Hoverable on Button

<!-- 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 improve your experience on our website. By browsing this website, you agree to our use of cookies.