Skip to content

Allow different positions by using HTML data attribute #170

Open
@andrewhinde

Description

@andrewhinde

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>

Activity

andrewhinde

andrewhinde commented on Aug 10, 2018

@andrewhinde
Author

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

stevenbenner commented on Sep 23, 2018

@stevenbenner
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.

added
FeatureSoftware improvements that involve implementing new features.
on Sep 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    FeatureSoftware improvements that involve implementing new features.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @stevenbenner@andrewhinde

        Issue actions

          Allow different positions by using HTML data attribute · Issue #170 · stevenbenner/jquery-powertip