Documentation and examples for adding tooltips with CSS for animations and data-attributes for local title storage: Google AMP Tooltips Library.
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>
<!-- 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>