我正在尝试动态更改节目并根据目标的属性隐藏事件。例如，有时我可能想要鼠标悬停，其他时候点击。同样，我希望能够调整效果，例如调整slideDown时间。
我找到了一种在Is it possible to set position of a Qtip programmatically?动态调整位置的方法，但由于它在show上运行，显然无效。
content.text可以使用回调函数，但我不相信show可以。
那么，如何动态更改节目和隐藏（理想情况下是幻灯片时间）？
下面是工作代码，其中没有工作的部分被注释掉了。请注意，我可以更改提示大小，但如果我更改高度，工具提示将无法正确显示 - 直到我滚动窗口。这不是那么重要，而更改节目和隐藏事件则是。
function setupQtips()
{
$("*[qtipiddiv]").each
(
function ()
{
$(this).qtip
(
{
overwrite: false,
content:
{
text: function (event, api)
{
var strId = $(this).attr('qtipiddiv');
return ($('#' + strId));
},
title:
{
text: function (event, api)
{
return ($(this).attr('qtiptitle'));
}
}
},
show:
{
event: 'click',
effect: function (offset)
{
$(this).slideDown(100);
},
solo: true
},
hide:
{
event: 'unfocus'
},
position:
{
viewport: $(window),
adjust:
{
screen: true
}
},
style:
{
classes: 'qtip-rounded qtip-shadow'
},
events:
{
show: function (event, api)
{
//Position
var elmTarget = $(api.elements.target[0]);
var strPositionMy = elmTarget.attr('qtippositionmy');
if (strPositionMy != undefined)
{
elmTarget.qtip('option', 'position.my', strPositionMy);
}
var strPositionAt = elmTarget.attr('qtippositionat');
if (strPositionAt != undefined)
{
elmTarget.qtip('option', 'position.at', strPositionAt);
}
//Height / width
var strWidth = elmTarget.attr('qtipwidth');
if (strWidth != undefined)
{
elmTarget.qtip('option', 'style.width', strWidth);
}
var strHeight = elmTarget.attr('qtipheight');
if (strHeight != undefined)
{
elmTarget.qtip('option', 'style.height', strHeight);
}
//Tip Height / width
//var strTipWidth = elmTarget.attr('qtiptipwidth');
//if (strTipWidth != undefined)
//{
// elmTarget.qtip('option', 'style.tip.width', strTipWidth);
//}
//var strTipHeight = elmTarget.attr('qtiptipheight');
//if (strTipHeight != undefined)
//{
// elmTarget.qtip('option', 'style.tip.height', strTipHeight);
// //api.set('style.tip.height', strTipHeight);
//}
//Title Button
var strTitleButton = elmTarget.attr('qtipbutton');
if (strTitleButton != undefined)
{
elmTarget.qtip('option', 'content.title.button', true);
}
//var strSlide = elmTarget.attr('qtipslide');
//if (strSlide != undefined)
//{
// elmTarget.qtip('option', 'show.effect.slideDown', strSlide);
//}
}
}
}
)
}
);
return;
}
答案 0 :(得分：0)
通过闪耀的光彩和大量的反复试验，我发现至少有三种方法可以动态设置Qtip选项。
我确信还有其他方法可以实现这一点，但下面的代码适用于我需要的所有情况，并演示了所有这三种方法。我需要使用至少两个，因为fadeIn方法不会让我只使用一个变量。仅当intFade未定义时，我才能调用fadeIn方法。
所以，希望这个答案有助于其他人。
function setupQtips()
{
$("*[qtipiddiv]").each
(
function ()
{
//Title
var elmTarget = $(this);
var strTitle = elmTarget.attr('qtiptitle');
if (strTitle == undefined)
{
strTitle = false;
}
//Title Button
var binTitleButton = elmTarget.attr('qtipbutton');
if (binTitleButton == undefined)
{
binTitleButton = false;
}
//Show
var strShow = elmTarget.attr('qtipshow');
if (strShow == undefined)
{
strShow = 'click';
}
if (strShow == 'false')
{
strShow = false;
}
//Hide
var strHide = elmTarget.attr('qtiphide');
if (strHide == undefined)
{
strHide = 'unfocus';
}
if (strHide == 'false')
{
strHide = false;
}
//Modal
var binModal = elmTarget.attr('qtipmodal');
var binBlur = false;
if (binModal == undefined)
{
binModal = false;
}
else if (strHide == 'unfocus')
{
binBlur = true;
}
//Tip Height / width
var intTipWidth = elmTarget.attr('qtiptipwidth');
if (intTipWidth == undefined)
{
intTipWidth = 6;
}
var intTipHeight = elmTarget.attr('qtiptipheight');
if (intTipHeight == undefined)
{
intTipHeight = 6;
}
//Style
var strStyle = elmTarget.attr('qtipstyle');
if (strStyle == undefined)
{
strStyle = '';
}
//____________________________________________________
//Set qtip
$(this).qtip
(
{
overwrite: false,
content:
{
text: function (event, api)
{
var strId = $(this).attr('qtipiddiv');
return ($('#' + strId));
},
title:
{
text: strTitle,
button: binTitleButton
}
},
show:
{
event: strShow,
effect: function (offset)
{
var strFade = offset.target.attr('qtipfade');
if (strFade == undefined)
{
$(this).fadeIn(0);
}
else
{
var intFade = parseInt(strFade);
$(this).fadeIn(intFade);
}
},
solo: true,
modal:
{
on: binModal,
blur: binBlur
}
},
hide:
{
event: strHide
},
position:
{
viewport: $(window),
adjust:
{
screen: true
}
},
style:
{
classes: 'qtip-rounded qtip-shadow ' + strStyle,
tip:
{
width: intTipWidth,
height: intTipHeight
}
},
events:
{
show: function (event, api)
{
//Position
var elmTarget = $(api.elements.target[0]);
var strPositionMy = elmTarget.attr('qtippositionmy');
if (strPositionMy != undefined)
{
elmTarget.qtip('option', 'position.my', strPositionMy);
}
var strPositionAt = elmTarget.attr('qtippositionat');
if (strPositionAt != undefined)
{
elmTarget.qtip('option', 'position.at', strPositionAt);
}
//Height / width
var strWidth = elmTarget.attr('qtipwidth');
if (strWidth != undefined)
{
elmTarget.qtip('option', 'style.width', strWidth);
}
var strHeight = elmTarget.attr('qtipheight');
if (strHeight != undefined)
{
elmTarget.qtip('option', 'style.height', strHeight);
}
}
}
}
)
}
);
return;
}
答案 1 :(得分：0)
$('.tip').qtip({
position: {
effect: false
}
});