正如你在这个博客上看到的某些标题提示的那样子,当鼠标经过某些文字时,会弹出提示的内容,比默认的标题看起来更加的高大上了。来看看这张图你就会明白这个插件是干什么用的了
使用方法
该插件使用比较绿色的做法,提示工具的样式使用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
先评论 后下载?
去掉了,之前加的,有这些地方的时候可以提醒一下我。
得先评论才能下载?
这个截屏软件是什么,求分享
gifcam
刚好用到这个东西,下载看看先。
试一试
只是对a标签起作用么?
真是好用
不错 学习了
但他聚一聚遇见互[哈哈]
很好的插件[嘻嘻]
博主 这个插件在使用时是不是需要给指定链接添加div标签属性,而不是全部链接都有效?
通过jQuery来设定的。如果你需要全部链接生效可以用$('a').toolTip();
博主不更新下? 你自己的博客的回到顶部都没有用tooltip,是因为一直闪吧,还是就是上面说的,如果在1200下面提示, 然后窗口缩小到800, 那个提示还在1200那个地方, 然后就是属性加个data-开头。要不W3C验证直接报错… 希望可以这样 data-position=”left top, 20px 10px”
最近忙,╮(╯_╰)╭没时间来修改,你的意见很好,我改善后会告知你的,多谢支持。
有bug
窗口缩放 提示还是在原来位置 比如1200px 你把窗口缩小到800 这个时候提示都看不到了… 还留在1200pxp这个地方,
第二 你右边不是有个fixed效果吗 如果向上 也用提示 会一直闪