jquery-powertip
jquery-powertip copied to clipboard
Allow different positions by using HTML data attribute
It would be great if we could initialize powertip across multiple tooltips, but have their placement determined by an HTML data attribute. Is there a way currently I can implement this? I tried using the powerTipPreRender event, but that only allows me to modify the element the tip is tied to.
Ex:
<span class="tooltips" data-powertiptarget="myToolTipNE" data-powertipPosition="ne">Northeast positioning</span>
<span class="tooltips" data-powertiptarget="myToolTipS" data-powertipPosition="s">South positioning</span>
It's a bit of a hack, and doesn't easily allow for extending options, but I was able to implement this sort of thing by doing this:
$(".powertip").each(function(){
var $thisTip = $(this);
var tipOptions = {
closeDelay: 250,
intentSensitivity: 25,
mouseOnToPopup: true,
fadeInTime: 0,
fadeOutTime: 0,
openEvents: ["click"],
closeEvents: ["click"],
placement: "s",
smartPlacement: true
};
// Override options. This could be expanded to check for all options using data attributes.
// Right now just supports placement and size.
// Get location
if($thisTip.data("placement")){
tipOptions.placement = $thisTip.data("placement");
}
// Get size class
if($thisTip.data("size")){
tipOptions.popupClass = $thisTip.data("size");
}
// Initialize the plugin
$thisTip.powerTip(tipOptions);
});
This request does have merit. But since options are shared across a PowerTip instance (a single .powerTip() call), it would require some extra logic that would group elements with the same options then do a separate init for each group.
Also, it would probably be more extensible if the data attribute was a generic "options" that would accept a JSON object. For example:
<span class="tooltips" data-powertipoptions="{ position: 'n', target: 'myToolTipN' }">North positioning</span>
I'll think about it. If it's easy and doesn't add a lot of code then I'll accept it as a feature request for a future release.