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

在线演示

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

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

  2. 有bug

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

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

发表回复