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

January 24, 2023 by JetSloth


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.


Video Embed

<iframe id="youtube_player" class="yt_player_iframe" width="300" height="360" src=""  allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe>


<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":""}', '*');


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!

Other Gravity Forms articles

Be sure to comment, share and send your finished examples on social media, or in the comments below! We’d love to see what you make of these examples and how creative you can get!

Style your Gravity Forms checkbox & radio fields into buttons with CSS