操作步骤:
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,
});