I'm trying to dynamically change the show and hide events based on attributes of the target. for example, sometimes I may want mouseover, and other times click. Similarly, I want to be able to adjust effects, such as adjust the slideDown timing.
I found a way to adjust the position dynamically at Is it possible to set position of a Qtip programmatically?, but since that runs on show, that clearly won't work.
content.text can use a callback function, but I don't believe show can.
So, how do I dynamically change the show and hide (and ideally the slideDown timing)?
The working code is below, with the parts that don't work commented out. Note that I can change the tip size, but the tooltip does not display correctly if I change the height -- until I scroll the window. That isn't so important, whereas changing the show and hide events is.
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;
}
Through a flash of brilliance and a lot of trial and error, I've discovered that there are at least three ways to set the Qtip options dynamically.
I'm sure there are other ways to accomplish this, but the code below works for all the situations I needed, and demonstrates all three methods. I needed to use at least two, as the fadeIn method would not let me just use a variable. Nor could I just call the fadeIn method only if intFade was undefined.
So, hopefully this answer helps someone else.
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;
}