【翻译】jQuery之qTip插件

    查找 jQuery Plugin, 找到了qTip。
所谓qTip,就是鼠标放到上方时,显示的消息(英文叫做ToolTip)。
代码和执行效果如下。

<script type="text/javascript" src="jQuery-qTip/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jQuery-qTip/jquery.qtip-1.0.0-rc3.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#prototype").qtip({
            content: 'あまり好きではない',
            position: { corner: { target: 'bottomRight', tooltip: 'center'} },
            style: { name: 'cream', tip: 'leftTop' },
            show: 'mouseover',
            hide: 'mouseout'
        });
        $("#jquery").qtip({
            content: '気に入ってます',
            position: { corner: { target: 'bottomRight', tooltip: 'center'} },
            style: { name: 'green', tip: 'leftTop' },
            show: 'mouseover',
            hide: 'mouseout'
        });
        $("#extjs").qtip({
            content: '気に入ってるが、難しい',
            position: { corner: { target: 'bottomRight', tooltip: 'center'} },
            style: { name: 'blue', tip: 'leftTop' },
            show: 'mouseover',
            hide: 'mouseout'
        });
    });
	
</script>
</head>
<body>
<table border=1>
<tr><td width=120 id="prototype">prototype.js</td></tr>
<tr><td width=120 id="jquery">jQuery</td></tr>
<tr><td width=120 id="extjs">ExtJS</td></tr>
</table>
</body>



【翻译】jQuery之qTip插件




因为有例子程序,也有文档,所以学会了基本的用法。
position是ToolTip的表示位置。
style的tip是ToolTip指着的尖尖的部分的位置。
ToolTip自身再稍微往右下方显示就好了。

你可能感兴趣的:(jquery,prototype)