Fra*_*wis 29 jquery jquery-ui jquery-ui-tooltip
使用jQuery UI工具提示,如果我超过目标,或者如果我超过了工具提示本身,我想保持工具提示处于打开状态.
我想我可以使用close回调来查看我是否超过了工具提示或目标区域,尽管我必须再分配另一个mouseout函数.
这是我的jsfiddle:http://jsfiddle.net/Handyman/fNjFF/
$(function()
{
$('#target').tooltip({
items: 'a.target',
content: 'just some text to browse around in'
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="target">
<a href="#" class="target">Hover over me!</a>
<a href="#" class="target">Hover over me too!</a>
</div>我现在正在研究它,看看我能想出什么.
Fra*_*wis 44
这是我经过大量搜索和测试后提出的解决方案:http://jsfiddle.net/Handyman/fNjFF/11/
$('#target').tooltip({
items: 'a.target',
content: 'Loading…',
show: null, // show immediately
open: function(event, ui)
{
if (typeof(event.originalEvent) === 'undefined')
{
return false;
}
var $id = $(ui.tooltip).attr('id');
// close any lingering tooltips
$('div.ui-tooltip').not('#' + $id).remove();
// ajax function to pull in data and add it to the tooltip goes here
},
close: function(event, ui)
{
ui.tooltip.hover(function()
{
$(this).stop(true).fadeTo(400, 1);
},
function()
{
$(this).fadeOut('400', function()
{
$(this).remove();
});
});
}
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div id="target">
<a href="#" class="target">Hover over me!</a>
<a href="#" class="target">Hover over me too!</a>
</div>
</body>当有一堆工具提示链接靠近时,我也遇到了延迟工具提示的问题,因此工具提示最终会堆叠或根本不关闭,因此当打开工具提示时,这将关闭所有其他打开的工具提示.
这是 div 元素的简单解决方案：
$(function() {
$("#mydiv").tooltip({
effect: 'slide',
content: 'loading...',
open: function (event, ui) {
$(ui.tooltip).appendTo(this);
}
});
});
| 归档时间： |
|
| 查看次数： |
18430 次 |
| 最近记录： |