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

Question

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?

Have you tried doing it with jQuery? http://api.jquery.com/click/ — simeg, Dec 21 '14 at 16:46
@simpe tried jQuery, JS, CSS, using the Foundation.lib.tooltip prototype. Nothing worked. — ccot, Dec 21 '14 at 16:47
When you want it to be able to close, do you mean by click, or a cross or something? — AwesomeGuy, Dec 21 '14 at 16:50
Perhaps this can be of some sort of help. http://stackoverflow.com/questions/26163088/show-foundation-5-tooltip-on-click — simeg, Dec 21 '14 at 16:52
@AwesomeGuy yes on click (cross or any other clickable element of choice) — ccot, Dec 21 '14 at 17:30
@simpe i've tried that already, it only blinked and disappeared back. — ccot, Dec 21 '14 at 17:31

score 2 · Accepted Answer · answered Dec 22 '14 at 03:45

2

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

answered Dec 22 '14 at 03:45

Keenan Lidral-Porter

1,626
9
9

Lidral-Porter I thought about it, but is there a way around so I don't have to play with the source code? – ccot Dec 22 '14 at 18:00
Certainly, it gets a little trickier. You would have to remove the event listeners for `mouseenter` and `mouseleave`. To do so, you have to call `.removeEventListener`, which takes 2 arguments: a type (i.e. "click") & the listener you want to remove. This second argument has to be a reference to the same function that is handling the event. See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener for examples / more details – Keenan Lidral-Porter Dec 22 '14 at 19:38

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

1 Answers1