Use a Tooltip instance multiple times

This is maybe a newbie question, but currently I’m standing in front of a wall.

I want to use a Tooltip multiple times on a page, but I don’t know how to instantiate a Tooltip and make it work on all elements with .example-class.

If instantiating a Tooltip some random stuff is beeing generated, eg. data-yeti-box=“26aoaz-tooltip”, which I cannot attach to a trigger.

This is generated for each instance and not relevant for you.
Generally this is not possible out of the box. You have to add the tooltip attributes to every part where the tooltip is used. Foundation Sites automatically generated them then.

In general you may only need $("[data-tooltip]").foundation() but $(document).foundation() should be sufficient.

Thanks for your fast reply. I want to show the “problem” more clearly.

Starting with

<span data-tooltip title="Tooltip text one">Just some text</abbr>
<span data-tooltip title="Tooltip text two">Just another text</abbr>
<span data-tooltip title="Tooltip text one">Just some text</abbr>
<span data-tooltip title="Tooltip text one">Just some text</abbr>

Generated markup

Tooltip

<span data-tooltip="" title="" aria-describedby="6mv3bm-tooltip" data-yeti-box="6mv3bm-tooltip" data-toggle="6mv3bm-tooltip" data-resize="6mv3bm-tooltip" class="has-tip" data-n="9my1aq-n" data-events="resize">Just some text</span>
<span data-tooltip="" title="" aria-describedby="najugh-tooltip" data-yeti-box="najugh-tooltip" data-toggle="najugh-tooltip" data-resize="najugh-tooltip" class="has-tip" data-n="9my1aq-n" data-events="resize">Just some text</span>
<span data-tooltip="" title="" aria-describedby="1614jl-tooltip" data-yeti-box="1614jl-tooltip" data-toggle="lrywrn-tooltip" data-resize="1614jl-tooltip" class="has-tip" data-n="9my1aq-n" data-events="resize">Just some text</span>
<span data-tooltip="" title="" aria-describedby="6xe3lp-tooltip" data-yeti-box="6xe3lp-tooltip" data-toggle="6xe3lp-tooltip" data-resize="6xe3lp-tooltip" class="has-tip" data-n="9my1aq-n" data-events="resize">Just some text</span>

Tooltip-content

<div class="tooltip" role="tooltip" data-is-focus="false" id="6mv3bm-tooltip" style="display: none;">Tooltip text one</div>
<div class="tooltip" role="tooltip" data-is-focus="false" id="najugh-tooltip" style="display: none;">Tooltip text two</div>
<div class="tooltip" role="tooltip" data-is-focus="false" id="1614jl-tooltip" style="display: none;">Tooltip text one</div>
<div class="tooltip" role="tooltip" data-is-focus="false" id="6xe3lp-tooltip" style="display: none;">Tooltip text one</div>

The Tooltip-Content for “Tooltip text one” exists in three equal element, but only one is necessary. The idea is to generate the Tooltip-Content once and reference it only. So the markup overhead could be reduced vastly and the performance can be improved.

Is ist possible to generate the Tooltip-Trigger and the Tooltip-Content manually and connect them to get the desired result?

This is currently not possible out of the box / by default. You would have to find some solution which requires additional JavaScript / jQuery code.

You could for example create the instance somewhere and copy & paste the element where needed.