Add a free tooltip to the elementor pricing table

David Denedo

David Denedo

Published on .

Table of Content

Introduction

A tooltip is like a little helper. It pops up when you hover your mouse over an element or tap on it on a touchscreen device. It’s a handy way to get more information without leaving the page. In this tutorial, we’ll show you how to easily create tooltips for your Elementor Pricing Table.

There are plugins available to help you create tooltips in Elementor, such as Dynamic.ooos Dynamic Content for Elementor or Crocoblocks JetTricks. In this tutorial, we’ll use a custom method which gives you more control and flexibility.

Click here to check out the demo:

Add the pricing table widget to a new section/container

First, drag a new pricing widget to a new column/container.

elementor pricing table widget

Add your preferred icon

Edit the Pricing widget under Content > Features > Text, and add your icon. You can use SVG or FontAwesome enclosed within span tags e.g.

<span><i class="fas fa-question-circle"></i></span>

Please Note: Enqueue Font Awesome Library

Elementor should automatically include the Font Awesome library when you use a Font Awesome icon. If that doesn’t load correctly, then you can either:

  1. install the Font Awesome plugin from the WordPress repository.
  2. load the Font Awesome script manually

Enqueue the required tippyJS scripts

To make the tooltip work, add external JavaScript scripts for tippyJS and popperJS to the footer of your page. You can find these scripts at https://atomiks.github.io/tippyjs/v6/getting-started/.

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

There are various ways to link these scripts when working with Elementor:

  • If you have Elementor Pro, you can add the scripts in Elementor > Custom Code
  • Another option is to use a code snippet plugin like Code Snippets or WPCodeBox. We recommend this method because it helps you keep all your code snippets organised in one place.
  • Otherwise, you can add an HTML widget to your page and paste the scripts there.

Call the tippy function

Finally, you need to call the tippy function to activate your tooltips. Here’s an example of how to do it:

<script>
document.addEventListener("DOMContentLoaded", function () {

    tippy('.dd-expert-kit', {
        content: 'Create advanced websites with our widest selection of ready-to-use website designs',
        placement: 'right',
    });

    tippy('.class-name-2', {
        content: '<strong>Get Premium Support</strong> from a highly trained team who are ready to answer any question 24/7 via email or live chat<div class="dd-subtext">See more details on our website</div>',
        placement: 'right',
        allowHTML: true,
    });
})
</script>

In this code, you add the ".dd-expert-kit" and ".class-name-2" class names to the tags around the different icons in the pricing features list. For instance:

<span class="dd-expert-kit"><i class="fas fa-question-circle"></i></span>

That’s it! By following these steps, you can easily add informative tooltips to your Elementor pricing table.