基于Jquery的文本提示控件 poshytip

来源：互联网发布：java 取svn版本号编辑：程序博客网时间：2024/06/07 20:57

操作步骤：

1.下载poshytitle控件文件。

2.下面引入poshytip的文件的css和js文件如下：

3.如果html结构如下：

<body>

</body>

通过以下这段脚本来绑定文本提示事件，其中title的内容就是文本提示的内容，一定要加上去。

$('.demo-top').poshytip({
className: 'tip-twitter',
showTimeout: 1,
alignTo: 'target',
alignX: 'center',
alignY: 'top',
offsetX: 8,
offsetY: 5,
});

以上这段脚本是将提示的内容显示在文字上方，还有将提示的内容显示在文字的左、右、下，见如下代码：

$('.demo-left').poshytip({
className: 'tip-twitter',
showTimeout: 1,
alignTo: 'target',
alignX: 'left',
alignY: 'center',
offsetX: 8,
offsetY: 5,
});

$('.demo-right').poshytip({
className: 'tip-twitter',
showTimeout: 1,
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 8,
offsetY: 5,
});

$('.demo-bottom').poshytip({
className: 'tip-twitter',
showTimeout: 1,
alignTo: 'target',
alignX: 'center',
alignY: 'bottom',
offsetX: 8,
offsetY: 5,
});

0 0