ractive-ez-tooltip

2.0.3 • Public • Published

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

Package Sidebar

Install

npm i ractive-ez-tooltip

Weekly Downloads

0

Version

2.0.3

License

WTFPL

Last publish

Collaborators

  • eleandor