stable 1.2.0

Tooltip

A hover label, attribute-driven. Add data-tooltip="…" to any element — the tooltip is created and positioned for you. Link ng_tooltip.js.

No extra markup: the text lives in data-tooltip, the side in data-tooltip-pos and the colour in data-tooltip-color. Hover the buttons below to see them.

Basic

tooltip.html

<button type="button" class="ng-btn ng-btn-primary-outline" data-tooltip="Hi there!">Hover me</button>

Positions

data-tooltip-pos = top (default), bottom, left or right.

tooltip.html

<button type="button" class="ng-btn ng-btn-mute-soft" data-tooltip="Top" data-tooltip-pos="top">Top</button>
<button type="button" class="ng-btn ng-btn-mute-soft" data-tooltip="Bottom" data-tooltip-pos="bottom">Bottom</button>
<button type="button" class="ng-btn ng-btn-mute-soft" data-tooltip="Left" data-tooltip-pos="left">Left</button>
<button type="button" class="ng-btn ng-btn-mute-soft" data-tooltip="Right" data-tooltip-pos="right">Right</button>

Colors

Tint the tooltip with data-tooltip-color — every colour token works.

tooltip.html

<button type="button" class="ng-btn ng-btn-primary-soft" data-tooltip="Primary" data-tooltip-color="primary">Primary</button>
<button type="button" class="ng-btn ng-btn-secondary-soft" data-tooltip="Secondary" data-tooltip-color="secondary">Secondary</button>
<button type="button" class="ng-btn ng-btn-success-soft" data-tooltip="Success" data-tooltip-color="success">Success</button>
<button type="button" class="ng-btn ng-btn-info-soft" data-tooltip="Info" data-tooltip-color="info">Info</button>
<button type="button" class="ng-btn ng-btn-warning-soft" data-tooltip="Warning" data-tooltip-color="warning">Warning</button>
<button type="button" class="ng-btn ng-btn-danger-soft" data-tooltip="Danger" data-tooltip-color="danger">Danger</button>
<button type="button" class="ng-btn ng-btn-mute-soft" data-tooltip="Mute" data-tooltip-color="mute">Mute</button>
<button type="button" class="ng-btn ng-btn-blue-soft" data-tooltip="Blue" data-tooltip-color="blue">Blue</button>
<button type="button" class="ng-btn ng-btn-blue-sky-soft" data-tooltip="Blue Sky" data-tooltip-color="blue-sky">Blue Sky</button>
<button type="button" class="ng-btn ng-btn-green-soft" data-tooltip="Green" data-tooltip-color="green">Green</button>
<button type="button" class="ng-btn ng-btn-lime-soft" data-tooltip="Lime" data-tooltip-color="lime">Lime</button>
<button type="button" class="ng-btn ng-btn-aguagreen-soft" data-tooltip="Aguagreen" data-tooltip-color="aguagreen">Aguagreen</button>
<button type="button" class="ng-btn ng-btn-indigo-soft" data-tooltip="Indigo" data-tooltip-color="indigo">Indigo</button>
<button type="button" class="ng-btn ng-btn-purple-soft" data-tooltip="Purple" data-tooltip-color="purple">Purple</button>
<button type="button" class="ng-btn ng-btn-purple-heart-soft" data-tooltip="Purple Heart" data-tooltip-color="purple-heart">Purple Heart</button>
<button type="button" class="ng-btn ng-btn-cyan-soft" data-tooltip="Cyan" data-tooltip-color="cyan">Cyan</button>
<button type="button" class="ng-btn ng-btn-magenta-soft" data-tooltip="Magenta" data-tooltip-color="magenta">Magenta</button>
<button type="button" class="ng-btn ng-btn-yellow-soft" data-tooltip="Yellow" data-tooltip-color="yellow">Yellow</button>

Anatomy

data-tooltip="text" data-tooltip-pos="top|bottom|left|right" data-tooltip-color="{color}"

Reference

Generated from the component source (_ng_tooltip.scss · ng_tooltip.js).

Component info

Name	`tooltip`
Type	`css+js`
Version	`1.2.0`
Status	`stable`
CSS	`/assets/css/components/_ng_tooltip.scss`
JS	`/assets/js/ng_tooltip.js`

Classes

.ng-tooltip .ng-tooltip-

Tokens

--ng-tooltip-bg --ng-tooltip-color --ng-tooltip-font-size --ng-tooltip-padding-x --ng-tooltip-padding-y