jquery-powertip icon indicating copy to clipboard operation
jquery-powertip copied to clipboard

Allow different positions by using HTML data attribute

Open andrewhinde opened this issue 7 years ago • 2 comments
trafficstars

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>

andrewhinde avatar Jul 27 '18 19:07 andrewhinde

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);
});

andrewhinde avatar Aug 10 '18 16:08 andrewhinde

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.

stevenbenner avatar Sep 23 '18 18:09 stevenbenner