jQuery工具提示插件:tooltip

文章目录

正如你在这个博客上看到的某些标题提示的那样子,当鼠标经过某些文字时,会弹出提示的内容,比默认的标题看起来更加的高大上了。来看看这张图你就会明白这个插件是干什么用的了

tooltip

使用方法

该插件使用比较绿色的做法,提示工具的样式使用CSS自定义,jQuery插件只是定义显示的位置。所以需要在引进插件的同时,也要增加一点样式。

jQuery代码

<script src="jquery.js"></script>
<script>
$(function(){
$("#default a").toolTip();
})
</script>

CSS样式

#tooltip{position:absolute;z-index:1000;max-width:300px;width:auto;margin:0; padding:0;background:#181818; opacity: .8;}
#tooltip p{padding:5px 10px; margin:0;color:#FFFFFF;font-family:Arial,Helvetica,Sans-serif;}

参数介绍

参数名字默认值参数作用
positionPro"position"标记位置的属性,你可以随意定义你需要的属性
positionValuenull标记位置的值,默认在右下角,你可以定义'left'和'top'
positionX10距离X轴的距离为10像素,可以设为负值(你可以直接在HTML定义某个的X轴的间距)
positionY20距离X轴的距离为20像素,可以设为负值(你可以直接在HTML定义某个的X轴的间距)
tipEle"tooltip"提示方式的ID,你可以自定以你设定的ID
tipText"title"提示的文字,你可以自定义为你设定的属性
tipFlagtrue是否显示提示,可以设为false不显示

下载插件

该插件已经上传到我的github,欢迎到tooltip主页下载,里面包含了js文件及其演示代码。

或者你可以直接下载未压缩tooltip.js或者压缩版tooltip.min.js

在线演示

原文链接:jQuery工具提示插件:tooltip 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/tooltip)

发表评论

请登录后发表评论:

17 Responses to “jQuery工具提示插件:tooltip”

  1. _阿羊羊羊羊羊羊

    先评论 后下载?

    登录回复
  2. _阿羊羊羊羊羊羊

    得先评论才能下载?

    登录回复
  3. 李俊WH

    这个截屏软件是什么,求分享

    登录回复
  4. IAmMichaelFu

    刚好用到这个东西,下载看看先。

    登录回复
  5. ByTime

    试一试

    登录回复
  6. 猪猪猪猪猪_侠

    只是对a标签起作用么?

    登录回复
  7. windboy_2008

    真是好用

    登录回复
  8. 异地大光码2013

    不错 学习了

    登录回复
  9. 熟男成长季

    但他聚一聚遇见互[哈哈]

    登录回复
  10. 宽度非凡

    很好的插件[嘻嘻]

    登录回复
  11. 1987里

    博主 这个插件在使用时是不是需要给指定链接添加div标签属性,而不是全部链接都有效?

    登录回复
    • 前端博客

      通过jQuery来设定的。如果你需要全部链接生效可以用$('a').toolTip();

      登录回复
  12. calm

    博主不更新下? 你自己的博客的回到顶部都没有用tooltip,是因为一直闪吧,还是就是上面说的,如果在1200下面提示, 然后窗口缩小到800, 那个提示还在1200那个地方, 然后就是属性加个data-开头。要不W3C验证直接报错... 希望可以这样 data-position="left top, 20px 10px"

    登录回复
    • 前端博客

      最近忙,╮(╯_╰)╭没时间来修改,你的意见很好,我改善后会告知你的,多谢支持。

      登录回复
  13. test

    有bug

    窗口缩放 提示还是在原来位置 比如1200px 你把窗口缩小到800 这个时候提示都看不到了... 还留在1200pxp这个地方,

    第二 你右边不是有个fixed效果吗 如果向上 也用提示 会一直闪

    登录回复