Show Foundation 5 Tooltip on Click

Question

I have a tooltip through foundation 5 on a span, like so:

<span data-tooltip aria-haspopup="true" class="has-tip tip-top" title="My tool tip"><i class="fi-pricetag-multiple size-21"></i></span>

This works fine. However, what I would like to do is only show the tooltip when a user clicks the span (instead of hovering). Then it closes when you click the a close button. I'm able to get halfway there when I add data-tooltip-open-event-type="touch" but this adds two tooltips and it still disapears when I hover away.

Any thoughts would be greatly appreciated. It seems odd that foundation 5 wouldn't have some sort of pop out for interactive content.

Thanks!

Answer 1

Just needed to figure this out for myself too.

To show:

Foundation.libs.tooltip.getTip($('#yourId')).show()

To hide:

Foundation.libs.tooltip.getTip($('#yourId')).hide()