Search code examples
javascriptcsstooltipzurb-joyridezurb-foundation-5

Foundation 5: Run tooltip only on click (like joyride style)

I want to have a tooltip using foundation 5 that appears only on click (disable on hover) and that can be closed.

Basically something to the first tooltip you see in this joyride example but without using joyride.

I couldn't find a way to fix it and documentation is scarce for it, How could this be possibly hacked around?

Solution

  • Seems like you would have to modify the source of the foundation library you're working with. In the Foundation.lib.tooltip it sets up an event listener for mouseenter and mouseleave. You would want to delete and only have listeners to touchstart (for mobile / touchscreen devices) & a mouseclick (which I'm assuming is what MSPointerDown does).

    reference: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.tooltip.js#L62

    I think you could also clear the logic on lines 86 - 92 that only follows the tooltip if the user has hovered over the tooltip for a certain duration

    https://github.com/zurb/foundation/blob/master/js/foundation/foundation.tooltip.js#L86-L92