Tooltip shows in backend but not on frontend

[wowflak]

Hi,

I have an image that plays a sound when clicked and have added the Extra tooltip code. It works fine in backend but does not appear on front. Link is in private note.
Thanks

[thai]

Hey @wowflak,

The extra tooltip HTML doesn’t wrap the image. Currently, it looks like this:

<a class="x-extra" data-x-element="extra" data-x-params="{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;title&quot;:&quot;title=\&quot;Cool it Man!\&quot;&quot;,&quot;content&quot;:&quot;&quot;}" href="#" title="" data-original-title="Cool it Man!">
<audio id="audio" src="https://concord.com/wp-content/uploads/2019/03/Cool-it-man.mp3"></audio>
</a>

It should be like this:

<a class="x-extra" data-x-element="extra" data-x-params="{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;title&quot;:&quot;title=\&quot;Cool it Man!\&quot;&quot;,&quot;content&quot;:&quot;&quot;}" href="#" title="" data-original-title="Cool it Man!">
<img src="https://concord.com/wp-content/uploads/2019/03/Shaft-3.png" width="550" height="550" class="shake-slow">
</a>

Could you please double check on your text element?

Let us know how it goes!

[wowflak]

See secure note please.

[wowflak]

I fixed it, I put the shortcode around the image only and not the audio portion. But now the audio does not play on click.
Thanks

[jade]

Hi @wowflak,

Please note that the tooltip/popover shortcode is not meant to support all HTML element especially links and those that has a click event. This is because the tooltip text will be wrapped in an <a> element and placing another <a> inside it will not work as expected so you might want to try another approach for this functionality.