Version 0.40.0

UI Atoms

Tooltips


CSS component

Default tooltip

<div class="sui-a-tooltip as--placement-top" role="tooltip">
    <div class="sui-a-tooltip__arrow"></div>
    <div class="sui-a-tooltip__inner">My tooltip</div>
</div>


<div class="sui-a-tooltip as--placement-left" role="tooltip">
    <div class="sui-a-tooltip__arrow"></div>
    <div class="sui-a-tooltip__inner">My tooltip</div>
</div>


<div class="sui-a-tooltip as--placement-right" role="tooltip">
    <div class="sui-a-tooltip__arrow"></div>
    <div class="sui-a-tooltip__inner">My tooltip</div>
</div>


<div class="sui-a-tooltip as--placement-bottom" role="tooltip">
    <div class="sui-a-tooltip__arrow"></div>
    <div class="sui-a-tooltip__inner">My tooltip</div>
</div>

Tooltip colors

<div class="sui-a-tooltip as--placement-top as--primary" role="tooltip">
    <div class="sui-a-tooltip__arrow"></div>
    <div class="sui-a-tooltip__inner">My tooltip</div>
</div>


<div class="sui-a-tooltip as--placement-top as--secondary" role="tooltip">
    <div class="sui-a-tooltip__arrow"></div>
    <div class="sui-a-tooltip__inner">My tooltip</div>
</div>


<div class="sui-a-tooltip as--placement-top as--success" role="tooltip">
    <div class="sui-a-tooltip__arrow"></div>
    <div class="sui-a-tooltip__inner">My tooltip</div>
</div>


<div class="sui-a-tooltip as--placement-top as--warning" role="tooltip">
    <div class="sui-a-tooltip__arrow"></div>
    <div class="sui-a-tooltip__inner">My tooltip</div>
</div>


<div class="sui-a-tooltip as--placement-top as--danger" role="tooltip">
    <div class="sui-a-tooltip__arrow"></div>
    <div class="sui-a-tooltip__inner">My tooltip</div>
</div>

JS component

Example:
<button class="sui-a-button" data-sui-a-tooltip="My tooltip">
    Tooltip
</button>

How top use

Add the data-sui-a-tooltip="My tooltip" attribute on your HTML element.

<button class="sui-a-button" data-sui-a-tooltip="My tooltip">
    ...
</button>    

Enable the plugin

import { Tooltip } from 'saagie-ui';

new Tooltip(myElement, { /* options */ }).init();

Options

Default options:

{
  title: 'My tooltip', // Default: the value of myElement 'data-sui-a-tooltip' attribute
  placement: 'top',
  classes: '',
  disableHtmlToBody: false,
}

Methods

init()

Init the tooltip.

const tooltip = new Tooltip(myElement, { /* options */ }).init();
toggle()

Open/Close the tooltip.

tooltip.toggle();
open()

Open the tooltip.

tooltip.open();
close()

Close the tooltip.

tooltip.close();
destroy()

Destroy all eventListeners.

tooltip.destroy();