html5tooltips.js纯javascript编写的轻巧的工具提示插件-BFW插件库

html5tooltips.js纯javascript编写的轻巧的工具提示插件

html5tooltips.js是用纯javascript编写的轻巧的工具提示插件，带有CSS3动画，没有框架依赖性。

使用方式：

第一步引入bfwone

第二步use插件及css和主题css

第三步配置参数

将工具提示绑定到特定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

完整例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["html5tooltips", "html5tooltips|html5tooltips.animation"], function() {
                for (var i = 10; i--;)
                    html5tooltips([{
                    contentText: "简单好记",
                    contentMore: "不能 包含空格和特殊字符",
                    targetSelector: "#name",
                    stickTo: "top",
                    color: "violet",
                    maxWidth: 180
                },
                    {
                        contentText: "生成",
                        contentMore: "May contain d<span style='color:red;'>1</span>g<span style='color:red;'>1</span>ts and sp<span style='color:red;'>3</span>c<span style='color:red;'>!</span>al sym<span style='color:red;'>6</span>ols",
                        targetSelector: "#password",
                        stickTo: "right",
                        color: 'metalic silver',
                        maxWidth: 180,
                        persistent: true
                    },
                    {
                        contentText: "一定要记住",
                        color: "rouge",
                        targetSelector: "#password2"
                    }]);

                for (var i = 10; i--;)
                    html5tooltips({
                    contentText: "点击填写",
                    color: "peacock",
                    targetSelector: "label",
                });

                for (var i = 10; i--;)
                    html5tooltips.refresh();

                console.log(
                    html5tooltips.getTooltipByTarget(
                        document.getElementById('address')));
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
      <fieldset>
    <legend>登录</legend>

    <table>
      <tbody>
        <tr>
          <td>
            <label for="name">用户名</label>
          </td>
          <td>
            <input id="name" type="text" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="password">密码</label>
          </td>
          <td>
            <input id="password" type="password" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="password2">确认密码</label>
          </td>
          <td>
            <input id="password2" type="password" />
          </td>
        </tr>
      </tbody>
    </table>
  </fieldset>
    <fieldset>
      
        <legend>联系信息</legend>
        <table data-tooltip-animate-function="spin" data-tooltip-stickto="right" data-tooltip-persistent="true">
            <tbody>
                <tr>
                    <td>
                        <label for="fullname">全名</label>
                    </td>
                    <td>
                        <input id="fullname" type="text" data-tooltip="你的姓名" data-tooltip-color="indigo" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="email">邮箱</label>
                    </td>
                    <td>
                        <input id="email" type="text" data-tooltip="你的邮箱" data-tooltip-color="kelly" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="phone">电话</label>
                    </td>
                    <td>
                        <input id="phone" type="text" data-tooltip="我们会用这个号码联系您" data-tooltip-color="hot pink" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="address">地址</label>
                    </td>
                    <td>
                        <textarea id="address" data-tooltip="邮寄给您的地址" data-tooltip-more="必须包含邮政编码" data-tooltip-color="bamboo" data-tooltip-delay="1000" data-tooltip-maxwidth="180"></textarea>
                    </td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</body>
</html>

官网 https://github.com/ytiurin/html5tooltipsjs