`
icejadelove
  • 浏览: 135081 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

16款js toolTip插件

阅读更多

当我们把鼠标放在一个链接上时,如果该链接设置了title属性,就会悬浮显示一个淡黄色背景的文本提示,这就是最基础的Tooltips提示工具。但其平凡的样子实在很难让人注意。利用JavaScript则可以生成一些漂亮、高级的tooltips,这些提示信息不仅仅限于文本,还可以是图片,音频,视频甚至框架,并且可以包含HTML元素,方便使用CSS来美化。

先吸引到访问的眼球,才能达到提醒的目的。16款Javascript Tooltips提示工具

1. HelpBalloon.js (演示地址)

HelpBalloon.js - Javascript提示工具

一个可灵活控制

2. jQuery.UI MessengerOutlook like message notification Widget (演示地址)

jQuery.UI MessengerOutlook like message notification Widget - Javascript提示工具

这个jQuery.UI控件类似于MessengerOutlook消息弹出提醒框。

3. Step by Step (演示地址)

Step by Step - Javascript提示工具

该脚本能够为访问者逐步地展示和介绍当前页面所包含的内容,效果类似于Tooltips。

4. BeautyTips

BeautyTips - Javascript提示工具

BeautyTips是一个jQuery Tooltip插件.

5. qTip

qTip - Javascript提示工具

6. Simple tooltip

Simple tooltip - Javascript提示工具

Simple tooltip是一个非常简单的Tooltip jQuery插件。

7. Side Navigation Tooltip (演示地址)

Side Navigation Tooltip - Javascript提示工具

利用jQuery为侧面导航菜单添加Tooltips气泡提示说明。

8. Notimoo (演示地址)

Notimoo - Javascript提示工具

Notimoo这个Mootools插件能够为你的网站添加类似于Growl风格的消息通知。

9. Ajax Tooltip script

Ajax Tooltip script - Javascript提示工具

这个Tooltip根据页面标签title属性指定的链接地地通过Ajax获取气泡要显示的内容。

10. Growler (演示地址)

Growler - Javascript提示工具

Growler是一个采用Prototype框架开发,用于实现在页面右下角或其它位置显示通知消息。类似于QQ或MSN的右下角提示消息。

11. jquery-rollover-tooltip (演示地址)

jquery-rollover-tooltip - Javascript提示工具

利用jQuery实现当鼠标移过图标上方时会出现一个气泡(tooltip),气泡中的内容读取自html tags属性。

12. MopTip (演示地址)

MopTip - Javascript提示工具

MopTip是一个采用jQuery开发的Tooltips插件。经测试支持Safari4、Firefox3、Opera9、IE6、IE7、IE8、Google crome等浏览器,且界面美观。

13. Mobile Tooltip widget

Mobile Tooltip widget - Javascript提示工具

一个可以在图片上显示Tooltips的GWT 控件。随着鼠标在图片上移动,Tooltips也会跟着移动。

14. Roar (演示地址)

Roar - Javascript提示工具

Roar是一个可以在屏幕右下角弹出消息提醒的Mootools插件。类似于QQ或MSN右下角弹出消息提示。

15. CSS ToolTip

CSS ToolTip - Javascript提示工具

可以使用CSS与JavaScript设计你Tooltips的风格。

16. Horizontal Tooltips Menu (演示地址)

Horizontal Tooltips Menu - Javascript提示工具

一个带Tooltip提示的横向水平菜单,Tooltip滑动横跨在菜单面板下。

分享到:
评论

相关推荐

    纯js tooltip工具提示插件

    纯js tooltip工具提示插件

    js-css-tooltip是一款使用js和css3制作的tooltip工具提示插件

    js-css-tooltip是一款使用js和css3制作的tooltip工具提示插件。该tooltip插件显示时带css3动画特效,并且会自动根据元素所在的位置来定位工具提示的位置。

    纯CSS功能齐全的Tooltip工具提示插件

    Hint.css是一款功能强大的Tooltip工具提示插件库。hint.css使用SASS来编写,不依赖于JavaScript。该tooltip插件使用data-*属性、伪元素、内容属性和CSS3过渡效果来制作tooltip。

    Tippy.js-纯js tooltip工具提示插件

    Tippy.js是一款轻量级的纯js tooltip工具提示插件。该tooltip插件功能强大,提供多种动画效果和主题效果,并允许用户自定义tooltip主题和使用html代码作为tooltip的模板。

    jQuery tooltip 提示插件

    jQuery的一款tooltip提示插件,通过鼠标悬停显示提示时间,提示内容使用ajax动态显示。

    基于Vue.js的Tooltip用户通知弹出框

    之前我们分享过一些比较...这次我们要带来另外一款Tooltip用户通知弹出框插件,基于Vue.js,它的特点是与其他tooltip不同,它更侧重于用户通知功能,因此我们可以直接将这款插件集成到自己的系统中提供用户通知功能。

    Protip是一款功能强大的jQueryTooltip插件

    Protip是一款功能强大的jQuery Tooltip插件。它提供众多的参数和方法来控制Tooltip,可以在49个位置上显示Tooltip,并且可以和animate.css配合制作各种Tooltip过渡动画效果。

    纯js tooltip工具提示插件特效.zip

    js-css-tooltip是一款使用js和css3制作的tooltip工具提示插件。该tooltip插件显示时带css3动画特效,并且会自动根据元素所在的位置来定位工具提示的位置。

    jQuery Metro Tooltip插件.zip

    jQuery Metro Tooltip插件是一款鼠标滑过弹出提示的jquery插件。

    基于bootstrap 3的jQuery tooltip提示插件

    ggtooltip.js是一款非常实用的基于bootstrap 3.X的jQuery tooltip提示插件。该bootstrap jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。

    轻量级前端tooltip插件

    压缩包包含 tippy.js & tippy.css & index.html(demo)

    WXA-ToolTip-微信小程序-ToolTip信息提示组件.zip

    微信小程序-ToolTip信息提示组件导入将ToolTip文件夹复制到pages文件夹内使用在需要使用ToolTip的页面对应的.wxml文件中添加: src="../ToolTip/toolTip.wxml"/> <!-- 引入toolTip模板 -->  is=...

    echarts-auto-tooltip.js

    echarts 实现数据(tooltip)自动轮播插件,假如需要这方面的报表轮播的话,可以尝试使用,请在下载之前确认是否符合业务需求,谢谢!

    jquery.tooltip.js

    jquery插件,tooltip提示文字。

    chartist-plugin-tooltip, Chartist.js的工具提示插件.zip

    chartist-plugin-tooltip, Chartist.js的工具提示插件 Chartist.js的工具提示插件这个插件为你的图表图表提供快速而简单的工具提示。 触摸支持计划即将完成。请访问 ...

    jQuery UI滑杆插件 可Tooltip提示.zip

    jQuery UI滑杆插件 可Tooltip提示是一款jQuery UI实现的,可以设置多种颜色,再加上CSS3上运用,可以让滑杆的游标变得有立体感,滑杆的Tooltip提示框也出现飞入飞出的动画效果。

    JS弹出层对话框,Tooltip提示,Msg消息框

    JS弹出层对话框插件源码,包含弹出层对话框和Tooltip提示框,消息框等多种功能,兼容主流浏览器(注:不兼容IE9以下版本的IE浏览器)。内置4种颜色的皮肤,且可以自定义对话框样式,可设置对话框位置。Tooltip可以...

    一个Vue2x的tooltip提示信息组件

    这是一个vue的tooltip提示信息组件。它使用非常简便,同时它支持自定义样式,提示信息的位置,触发提示信息弹出的事件。提示出现隐藏的延迟时间等。

    JS中使用react-tooltip插件实现鼠标悬浮显示框

    前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结 先看效果(为了方便参考,用的是原始样式): 文档参考地址: https://www.npmjs.com/package/react-tooltip 1, 首先在配置...

    纯js tooltip工具提示插件特效特效代码

    js-css-tooltip是一款使用js和css3制作的tooltip工具提示插件。该tooltip插件显示时带css3动画特效,并且会自动根据元素所在的位置来定位工具提示的位置。

Global site tag (gtag.js) - Google Analytics