该插件使用比较绿色的做法,提示工具的样式使用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不显示 |
包含演示文档和JS文件