使用方法
将工具提示绑定到特定UI元素的最简单的方法是向元素的HTML代码添加data- *属性。
<span data-tooltip="Refresh"></span>添加额外的属性以自定义工具提示。
<span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo"
data-tooltip-animate-function="foldin"></span>自定义继承
要使用较少的代码自定义多个工具提示，请在其共享父元素（或文档正文）中添加data- *属性。
<body data-tooltip-animate-function="foldin">
<div data-tooltip-color="bamboo">
<span data-tooltip="Build"></span>
<span data-tooltip="Refresh"></span>
<span data-tooltip="Delete"></span>
</div>
</body>
高级用法
你可以使用JavaScript构造函数。
html5tooltips({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
});
html5tooltips.js中有一个额外的功能，它允许在用户关注输入字段和可编辑元素时在工具提示中显示扩展文本。你可以使用纯文本或HTML格式。
html5tooltips({
contentText: "Not less then 8 symbols",
contentMore: "Use lower and UPPER case letters, num6ers and spec!al symbols to make password safe and secure.",
maxWidth: "180px",
targetSelector: "#password"
});
通过将一个工具提示对象数组传递给Javascript构造函数来定义多个工具提示。
html5tooltips([
{
animateFunction: "spin",
color: "#FF0000",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
},
{
contentText: "Simple to remember",
contentMore: "Check that your login name is not used by anyone else.",
stickTo: "left",
maxWidth: "180px",
targetSelector: "#username"
}
]);
样式
要修改工具提示样式，只需将样式应用到其根元素.html5tooltip-box。 属性background-color，color，border-radius，box-shadow，font-family和font-size将应用到工具提示文本容器。
.html5tooltip-box
{
background-color: #2A2A2A;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 10px rgba(255,255,255,.15);
color: #F7F7F7;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
HTML5Tooltip UI组件
var tooltip = new HTML5TooltipUIComponent;
var target = document.getElementById("refresh");
tooltip.set({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
target: target
});
target.addEventListener('mouseenter',function(){
tooltip.show();
});
target.addEventListener('mouseleave',function(){
tooltip.hide();
});
tooltip.mount();
通过目标元素获取工具提示
var tooltip = html5tooltips.getTooltipByTarget(document.getElementById('myElement'));
tooltip.destroy();
可使用的参数
- animateFunction
- color
- contentText
- contentMore
- delay
- hideDelay
- disableAnimation
- maxWidth
- persistent
- stickTo
- stickDistance
- targetSelector
可使用的 data-* 属性
- data-tooltip
- data-tooltip-animate-function
- data-tooltip-color
- data-tooltip-delay
- data-tooltip-hide-delay
- data-tooltip-maxwidth
- data-tooltip-more
- data-tooltip-persistent
- data-tooltip-stickto
2017-08-07
