Tooltips

Documentation for tooltips components.

Files

app/styles/components/tooltips/style.scss

Tooltip

Tooltip can display simple text information inside bubble next to component. There are few variations of how tooltips can be used. For example on text, on button, with or without tooltip icon. Tooltip can be created using [data-tooltip] attribute in conjunction with [title] attribute.

Javascript dependency

Tooltip component is wrapper plugin around Tippy.js. All methods and events are supported.

Warning

Due to a nasty bug, tooltips in styleguide sometimes appear in wrong position. luckily, this does not happen in the app.

Example:

This text has tooltip

Code:

<em data-tooltip title="This is tooltip text">...</em>

<button class="btn btn--ghost" data-tooltip title="This is tooltip text">..</button>

<svg class="icon icon-user icon--large" role="img" aria-hidden="true" data-tooltip data-tooltipped="" title="This is tooltip text on icon">...</svg>

<button class="btn btn--ghost" data-tooltip title="&lt;div class='h4 mb-small'&gt;This is a Popover text&lt;/div&gt;&lt;button class='btn btn--hollow mb-small'&gt;Button in Popover!&lt;/button&gt;" data-distance="15" data-animation="scale" data-arrowsize="big" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true">Click me! (Popover example)</button>

<button class="btn btn--ghost" data-tooltip="" data-tooltip-image="/images/300x300.gif" data-position="right" data-interactive="false" data-tooltipped="" aria-describedby="tippy-tooltip-5">Tooltip with custom image</button>

Tooltip positions

Tooltip can be positioned on: top(default)/right/bottom/left with attribute data-position as shown on example below.

Example:

Code:

<div class="bar">
  <div class="bar__item">
    <button class="btn btn--ghost" data-tooltip title="This is tooltip text">Position: top (default)</button>
  </div>
  <div class="bar__item">
    <button class="btn btn--ghost" data-tooltip data-position="right" title="This is tooltip text">Position: right</button>
  </div>
  <div class="bar__item">
    <button class="btn btn--ghost" data-tooltip data-position="bottom" title="This is tooltip text">Position: bottom</button>
  </div>
  <div class="bar__item">
    <button class="btn btn--ghost" data-tooltip data-position="left" title="This is tooltip text">Position: left</button>
  </div>
</div>