Skip to content
Tooltips with a nice flexible API
JavaScript HTML Makefile CSS
Branch: master
Clone or download
This branch is 32 commits ahead, 17 commits behind component:master.

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.jshintrc
History.md
Makefile
Readme.md
index.js
package.json
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 @pirxpilot/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

You can’t perform that action at this time.