Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow different positions by using HTML data attribute #170

Open
andrewhinde opened this issue Jul 27, 2018 · 2 comments
Open

Allow different positions by using HTML data attribute #170

andrewhinde opened this issue Jul 27, 2018 · 2 comments
Labels
Feature Software improvements that involve implementing new features.

Comments

@andrewhinde
Copy link

andrewhinde commented Jul 27, 2018

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
Copy link
Author

andrewhinde commented Aug 10, 2018

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

@stevenbenner
Copy link
Owner

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 stevenbenner added the Feature Software improvements that involve implementing new features. label Sep 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature Software improvements that involve implementing new features.
Projects
None yet
Development

No branches or pull requests

2 participants