@pirxpilot/tip

2020-01-14

@pirxpilot/tip

Tip component

Tip

Tip component. Inspired by tipsywithout the weird jQuery API.

js tip componentjs 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

  • showthe tip is shown
  • hidethe tip is hidden

API

Tip(el, string)

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

Tip(el, [options])

Attach a Tipto an element, and display the titleattribute's contents on hover. Optionally apply a hide delayin milliseconds. Also if staticis 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 contentbeing 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:

  • autoset to falseto disable auto-positioning

Tip#show(el)

Show the tip attached to el, where elmay 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 mouseoverand hiding on mouseout.

Tip#effect(name)

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

Themes

License

MIT

以上是 @pirxpilot/tip 的使用教程帮助文档。


上一篇:assert-js
下一篇:@pirxpilot/antiscroll
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章
暂无相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部