Tooltips

Unpoly comes with a basic tooltip implementation.

Add an up-tooltip attribute to any HTML tag to show a tooltip whenever the user hovers over the element:

  <a href="/decks" up-tooltip="Show all decks">Decks</a>

The default styles render a tooltip with white text on a gray background. A gray triangle points to the element.

To change the styling, simply override the CSS rules for the .up-tooltip selector and its :after selector that is used for the triangle.

The HTML of a tooltip element is simply this:

<div class="up-tooltip">
  Show all decks
</div>

The tooltip element is appended to the end of <body>.

CSS selectors

Displays a tooltip with text content when hovering the mouse over this element.

Displays a tooltip with HTML content when hovering the mouse over this element:

Opens a tooltip over the given element.

Closes a currently shown tooltip.

Returns whether a tooltip is currently showing.

Configures defaults for future tooltips.