How to add HTML markup and YouTube videos into Gravity Forms Tooltips

Our Gravity Form’s addon – Gravity Forms Tooltips is fast becoming one of our most popular add-ons for Gravity Forms. We’ve extended Tooltips to now have more support for HTML markup and now, even YouTube embeds! Checkout how to power-up your Gravity Forms Tooltips below.

Add images to your Tooltips

Adding images or animated GIFs to your tooltips is super easy. Just add normal HTML markup to your tooltip content area. You can use the standard HTML <img> tag like so <img src="link_to_your_image.jpg"/>

Just ensure to give the image a “width” property to ensure it’s the right size within the tooltip <img width="300" src="link_to_your_image.jpg"/>

Adding heading formats

Like any normal HTML markup, you can add some paragraph text along with any heading format or text styles you want.

<h5>My Heading</h5>
<p>Sed nunc elit, facilisis eu lectus non, malesuada molestie massa. Mauris in arcu nec velit hendrerit sodales. Etiam aliquam rhoncus lobortis.</p>

Adding YouTube video embeds

You can also add YouTube video embeds into tooltips. There’s a couple of things to consider however. You’ll need to ensure the embed code has the ?enablejsapi=1&version=3 parameter added to the embed src URL.

You’ll need to also add the below Javascript to your form or theme to ensure the video stops playing when the tooltip loses user focus or gets closed. We suggest adding a HTML field in your gravity form, and pasting in the below Javascript into that field.

Just ensure to give the image a “width” property to ensure it’s the right size within the tooltip <img width="300" src="link_to_your_image.jpg"/>

Video Embed

<iframe id="youtube_player" class="yt_player_iframe" width="300" height="360" src="https://www.youtube.com/embed/6Ij9PiehENA?enablejsapi=1&version=3"  allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe>

Javascript

<script type = "text/javascript" >
    jQuery(document).on('gftt_tooltip_close', function() {
        document.querySelectorAll(".yt_player_iframe").forEach((playeriFrame, i) => {
            playeriFrame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        });
    }); 
</script>

Summary

So now you know you can add in almost any HTML markup and YouTube video embeds into your Gravity Forms tooltips, go get creative and let’s see what you can build!