search

stevenbenner / jquery-powertip

:speech_balloon: A jQuery plugin that creates hover tooltips.
https://stevenbenner.github.io/jquery-powertip/
MIT License
821 stars 137 forks source link

Using PowerTip with SVG on touch screens #111

Open BradyStephenson opened 10 years ago

BradyStephenson commented 10 years ago

First... THANK YOU for such a fantastic plugin that does so much without being overwhelming AND that isn't abandonware. ;)

I'm putting together a site called MessiahsPassoverWeek.info and PowerTip is perfect for what I needed to accomplish. It works great on computers but I'm having an issue in that I can't seem to get the PowerTips to work with SVG elements on tablets/touch screens. Is there a trick to getting the PowerTips to show up on the touch of an SVG element?

Thanks again!

stevenbenner commented 10 years ago

I haven't done much testing with PowerTip in touch environments. There are some hurdles with touch that PowerTip doesn't specifically work around. Generally a tap will cause the mouseover event to fire, but in touch environments it might be better to hook to click and/or directly to touch events. However, PowerTip doesn't listen for those by default.

I'll do some investigation.

philgyford commented 9 years ago

In case it's useful to anyone, I wanted to have powerTip open a little more smoothly on touch-based devices (although I'm not using SVG elements). So far I have:

if ('ontouchstart' in document.documentElement) {
    // This is a touch-based device.
    $('body').on('touchstart', '.js-tt', function() {
        $(this).powerTip('show');
    });
};

Where the .js-tt class is on all of my elements that should have tooltips.

This seems to work - powerTip opens less sluggishly than when relying on the device's touch-based substitute for hovering. But there is a bit of a flicker, which suggests the original event is still firing and (maybe) opening powerTip again? I'm not sure what that original event is, or how to disable it.