Menu icon Foundation
Put code in tooltip

I'm in the middle of learning Foundation and applying it to a site that already exists. Now, the trick is that I have to replicate existing functionality. There needs to be sample code in a tooltip (or something that looks and acts like a tooltip) that is selectable. In the old site it looks like this:

<a href="" aria-haspopup="true" class="popuptip">Formatting options
        <span class="popuptooltip">
        The following are html tags that are allowed, and how to use them:<br /><br />
          
        &lt;a href=&quot;http://example.com&quot;&gt;Link&lt;/a&gt;<br /><br />
        &lt;img src=&quot;http://example.com/image.jpg&quot;&gt; Image
        <br /><br />
        &lt;b&gt;Bold&lt;/b&gt;<br /><br />
        &lt;strong&gt;Bold&lt;/strong&gt;<br /><br />
        &lt;i&gt;Italic&lt;/i&gt;<br /><br />
        &lt;em&gt;Italic&lt;/em&gt;<br /><br />
        &lt;ul&gt;<br />
        &lt;li&gt;Unordered list item&lt;/li&gt;<br />
        &lt;li&gt;Second unordered list item&lt;/li&gt;<br />
        &lt;/ul&gt;<br />
        <br />
        &lt;ol&gt;<br />
        &lt;li&gt;Numbered list item&lt;/li&gt;<br />
        &lt;li&gt;Second numbered list item&lt;/li&gt;<br />
        &lt;/ol&gt; </span></a>
            

         

I've been trying to figure out how to get this,or at least something that looks/acts like this, into Foundation, and my search-fu has failed me. Any ideas?

tooltip

I'm in the middle of learning Foundation and applying it to a site that already exists. Now, the trick is that I have to replicate existing functionality. There needs to be sample code in a tooltip (or something that looks and acts like a tooltip) that is selectable. In the old site it looks like this:

<a href="" aria-haspopup="true" class="popuptip">Formatting options
        <span class="popuptooltip">
        The following are html tags that are allowed, and how to use them:<br /><br />
          
        &lt;a href=&quot;http://example.com&quot;&gt;Link&lt;/a&gt;<br /><br />
        &lt;img src=&quot;http://example.com/image.jpg&quot;&gt; Image
        <br /><br />
        &lt;b&gt;Bold&lt;/b&gt;<br /><br />
        &lt;strong&gt;Bold&lt;/strong&gt;<br /><br />
        &lt;i&gt;Italic&lt;/i&gt;<br /><br />
        &lt;em&gt;Italic&lt;/em&gt;<br /><br />
        &lt;ul&gt;<br />
        &lt;li&gt;Unordered list item&lt;/li&gt;<br />
        &lt;li&gt;Second unordered list item&lt;/li&gt;<br />
        &lt;/ul&gt;<br />
        <br />
        &lt;ol&gt;<br />
        &lt;li&gt;Numbered list item&lt;/li&gt;<br />
        &lt;li&gt;Second numbered list item&lt;/li&gt;<br />
        &lt;/ol&gt; </span></a>
            

         

I've been trying to figure out how to get this,or at least something that looks/acts like this, into Foundation, and my search-fu has failed me. Any ideas?

Rafi Benkual over 4 years ago

I would use a dropdown instead. It's made for arbitrary content where a tooltip by design is for text only.

Tasha Jaeger over 4 years ago

Thank you, that is precisely the guidance I needed!