isabella232 / tip

Tooltips with a nice flexible API

Tip

Tip component. Inspired by tipsy without the weird jQuery API.

Live demo is here.

Installation

$ npm install component-tip

Features

• events for composition
• "auto" positioning on window resize / scroll
• fluent API

Events

• show the tip is shown
• hide the tip is hidden

API

Tip(el, string)

Equivalent to Tip(el, { value: string }).

Tip(el, [options])

Attach a Tip to an element, and display the title attribute's contents on hover. Optionally apply a hide delay in milliseconds. Also if static is true the tip will be fixed to its initial position.

var tip = require('tip');
tip('a[title]', { delay: 300 });

new Tip(content, [options])

Create a new tip with content being either a string, html, element, etc.

var Tip = require('tip');
var tip = new Tip('Hello!');
tip.show('#mylink');

Tip#position(type, [options])

• top
• top right
• top left
• bottom
• bottom right
• bottom left
• right
• left

Options:

• auto set to false to disable auto-positioning

Tip#show(el)

Show the tip attached to el, where el may be a selector or element.

Tip#show(x, y)

Show the tip at the absolute position (x, y).

Tip#hide([ms])

Hide the tip immediately or wait ms.

Tip#attach(el)

Attach the tip to the given el, showing on mouseover and hiding on mouseout.

Tip#effect(name)

Use effect name. Default with Tip.effect = 'fade' for example.

Themes

• Aurora
• Nightrider

License

MIT