Tipv0.1.0

Introduction

Tip 是一个基于 jQuery 的简单实用的提示信息插件。它的功能非常的单一,就是在指定的位置显示提示信息,用来替代略显简陋的原生的 title 提示。

Feature

  • Tip 支持 CommonJS/AMD/CMD 规范
  • Tip 可以作为 jQuery 插件使用
  • Tip UI 界面清新简洁,并且可以自定义外观

Examples

<button class="tip" data-position="top-left" data-tip="This is a Tip shows on the left of the Button">
    Tip shows top left
</button>
<button class="tip" data-position="top-center" data-tip="robert developed the tip widget">
    Tip shows top center
</button>
<button class="tip" data-position="top-right" data-tip="this is a good tip demo">
    Tip shows top right
</button>
<button class="tip" data-position="left" data-tip="show me the tip">
    Tip shows left
</button>
<button class="tip" data-position="right" data-tip="show me the tip">
    Tip shows right
</button>
<button class="tip" data-position="bottom-left" data-tip="who is your daddy">
    Tip shows bottom left
</button>
<button class="tip" data-position="bottom-center" data-tip="Grid is good">
    Tip shows bottom center (as default)
</button>
<button class="tip" data-position="bottom-right" data-tip="tip is helpful tool">
    Tip shows bottom right
</button>

Usage

// use as jquery plugin
$(".tip").tip();

// use as Independent object
new Tip({
    // the target DOM element of ID selector
    target: "#tip",
    // Tip text or the "data-tip" property of the target element
    tip: "Tip is a useful jQuery plugin",
    // tip display position (or "data-position" of the target element, "bottom-center" as default value)
    position: "left",
    // the HTML template of the root DOM element
    TIP_WRAP: '<div class="tip-wrap {position} ' + CLS_HIDE + '" id="tip-{id}"></div>',
    // the HTML template of the content DOM element
    TIP_CONTENT: '<div class="tip-content">{content}</div>'
});

// use as CommonJS and CommonJS-like environments
var Tip = require("tip");

Configuration

$(".tip").tip({
    // the target DOM element of ID selector
    target: "#tip",
    // Tip text or the "data-tip" property of the target element
    tip: "Tip is a useful jQuery plugin",
    // tip display position (or "data-position" of the target element, "bottom-center" as default value)
    position: "left",
    // the HTML template of the root DOM element
    TIP_WRAP: '<div class="tip-wrap {position} ' + CLS_HIDE + '" id="tip-{id}"></div>',
    // the HTML template of the content DOM element
    TIP_CONTENT: '<div class="tip-content">{content}</div>'
});

License

Code licensed under MIT License · API Documentation licensed under CC BY 3.0