Tooltips with a nice flexible API
JavaScript HTML CSS Makefile
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.npmignore
History.md
Makefile
Readme.md
component.json
index.js
package.json
template.html
tip.css

Readme.md

Tip

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

js tip component js tip with markup

js maru

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

License

MIT