jQuery工具提示插件tooltip.js

所属分类:UI-工具提示

 3092  14  查看评论 (3)
jQuery工具提示插件tooltip.js ie兼容9

tooltip.js

tooltip.js是一款HTML5 tooltips工具提示jquery插件。tooltip.js可以通过js或html5 data属性来实例化一个tooltip。它的特点还有:

可以自定义tooltip动画。内置暗色和亮色两种主题。可以自定义文字和阴影的颜色等属性。允许动态的改变tooltip的内容。允许在没有用户交互的情况下显示tooltip。

使用方法

在页面中引入jquery和tooltip.js文件,以及样式文件tooltip.css。

<script src='js/jquery.min.js'></script>
<script src='js/tooltip.js'></script>
<link rel="stylesheet" href="css/tooltip.css" type="text/css" />

通过js来初始化tooltip

第一种使用tooltip.js插件的方法是通过js来初始化tooltip。例如:

<span id="my-element">Hover Me</span>
$(document).ready(function() {
    $('#my-element').tooltip({
        // 配置参数 
    });
});

通过data属性来初始化tooltip

第二种方法是通过HTML data属性和class来初始化tooltip。例如:

首先定义全局的tooltip属性:

$(document).ready(function() {
    ToolTip.init({
        delay: 400,
        fadeDuration: 250,
        fontSize: '1.0em',
        theme: 'light',
        textColor: '#757575',
        shadowColor: '#000',
        fontFamily: "'Roboto-Medium', 'Roboto-Regular', Arial"
    });
});

然后通过data-tip属性和tip-hotspotclass来定义一个tooltip。

<button class="tip-hotspot" data-tip="This is the tooltip text">Button text here</button>

配置参数

使用第一种通过js来初始化tooltip的方法时,可以使用下面的配置参数:

参数是否必须描述
texttooltip上显示的内容。
delaytooltip显示的延迟时间。默认为0。
fadeDuration淡出的持续时间,单位毫秒,默认为250毫秒。
fontSizetooltip的字体大小,默认为1em。
themetooltip的主题。可选有'dark'和'light'。
textColor文字的颜色。
shadowColor阴影的颜色。
fontFamily字体族。默认为'Arial, Helvetica, sans-serif'。

示例:

$(document).ready(function() {
    $('#my-element').tooltip({
        text: '这是一个tooltip'
    });
});

带参数的tooltip:

$(document).ready(function() {
    $('#my-element').tooltip({
        text: '这是一个tooltip',
        fontSize: '14px',
        theme: 'light',
        fontFamily: "'Roboto-Medium', 'Roboto-Regular', Arial",
        delay: 400
    });
});

 方法

使用第一种通过js来初始化tooltip的方法时,可以使用下面的方法:

setText:设置文字。

$('#my-element').tooltip('setText', 'This is the new tooltip text');

autoTip:自动显示tooltip。

$('#my-element').tooltip('autoTip', {MY OPTIONS});

自动显示tooltip的可用配置参数有:

参数是否必须描述
displayDurationtooltip多久才被显示。默认为5000毫秒。
fadeOutDuration淡出的持续时间,默认为1000毫秒。
onShowCallbacktooltip出现时的回调函数。
onHideCallbacktooltip隐藏时的回调函数。

示例:使用setText来设置文字,然后使用autoTip来自动显示tooltip。

$('#social-messages-button').tooltip('setText', 'You have 1 new message');
$('#social-messages-button').tooltip('autoTip', {
    displayTime: 4000,
    fadeOutDuration: 5000,
    onShowCallback: function() {
        // play notification sound  
    }
});
相关插件-工具提示

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 7730  45

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 14148  110

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 10902  74

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 10353  36

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    insist 0
    2017/11/2 11:31:09
    灰溜溜 0
    2017/10/10 21:32:24

    找了半天,还是这个插件吊啊

    回复
    芒果 0
    2017/8/19 14:02:43
取消回复