当前位置: 首页 > 工具软件 > PoshyTip > 使用案例 >

基于Jquery的文本提示控件 poshytip

东郭海阳
2023-12-01

操作步骤:

1.下载poshytitle控件文件。

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

<link href="${ctx}/css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">

<link rel="stylesheet" href="${ctx}/js/poshytitle/src/tip-twitter/tip-twitter.css" type="text/css" />

 <script src="${ctx}/js/poshytitle/src/jquery.poshytip.js"></script>

3.如果html结构如下:

<body>

<a class="demo-top" title="{{item.rejectReason}}">驳回原因</a>

</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,
});


 类似资料: