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” 标记位置的属性,你可以随意定义你需要的属性
positionValue null 标记位置的值,默认在右下角,你可以定义’left’和’top’
positionX 10 距离X轴的距离为10像素,可以设为负值(你可以直接在HTML定义某个的X轴的间距)
positionY 20 距离X轴的距离为20像素,可以设为负值(你可以直接在HTML定义某个的X轴的间距)
tipEle “tooltip” 提示方式的ID,你可以自定以你设定的ID
tipText “title” 提示的文字,你可以自定义为你设定的属性
tipFlag true 是否显示提示,可以设为false不显示

下载插件

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

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

在线演示

17 thoughts on “jQuery工具提示插件:tooltip

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

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

  3. 有bug

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

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注