JSPM – ractive-ez-tooltip@2.0.3

Package Exports

ractive-ez-tooltip

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ractive-ez-tooltip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

ractive-ez-tooltip