Ractive Ez Tooltip

Tooltip component for ractive.js

Demo

Install

npm i ractive-ez-tooltip

import 'ractive-ez-tooltip';
import 'ractive-ez-tooltip/themes/blue.less';

Usage

<div as-eztooltip="@this, 'simple', 'A simple hint'">Hover to get a simple tooltip</div>
<div as-eztooltip="@this, 'complex', data">Hover to get a complex tooltip</div>

<EzTooltip name="simple">
    <b>Tooltip line 1<br>
    <i>{{ data }}
</EzTooltip>

<EzTooltip name="complex" delay="500">
    <h1>{{ data.name }}</h1>
    <div>Age: {{ data.age }}</div>
    <div>Gender: {{ data.gender }}</div>
</EzTooltip>

EzTooltip component

• name: The name to reference the tooltip
• delay: Time (in ms) to wait before showing the tooltip (use 0 to show the tooltip immediately)

Decorator

Use the eztooltip decorator on an element to have a tooltip pop up when hovering over the element.

The decorator accepts 3 parameters:

• @this: Reference to the instance containing the tooltip (this is needed to discover the tooltip component)
• name: The name of the tooltip to reference (this should be the 'name' property of the tooltip component)
• data: The data to pass to the tooltip