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.

<!-- 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>