In this article, you will learn how you can add a tooltip.

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element.

LeadsHook provides 2 options to add a tooltip in a node.

First Option: Using node level script

To add a script at the node level, in the node, go to the Script section and click add button.

Note: Make sure to fire this script upon entering a node.

Copy and paste these codes below in the node where you want to add the tooltip:

<style>
  /* Tooltip container */
  .customtooltip {
    position: relative;
    display: inline-block;
    font-size: 10px;
    font-weight: bolder;
    background-color: black;
    color: white;
    padding: 0px 5px;
    border-radius: 50%;
  }

  /* Tooltip text */
  .customtooltip .customtooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: #555;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    padding: 5px;
    border-radius: 6px;

  /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 23px;
    left: -82px;
    margin-left: 0px;

  /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
  }

  /* Tooltip arrow */
  .customtooltip .customtooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .customtooltip:hover .customtooltiptext {
    visibility: visible;
    opacity: 1;
  }
</style>


<script>
  const tooltiptext1 = document.createElement("span");
  tooltiptext1.innerText = "You sell templated services for fixed prices";
  tooltiptext1.classList.add("customtooltiptext");
  
  const tooltiptext2 = document.createElement("span");
  tooltiptext2.innerText = "Priced based on time and materials needed";
  tooltiptext2.classList.add("customtooltiptext");
  
  setTimeout( ()=>{
    let productizedService = document.getElementById("tt1");
    productizedService.classList.add("customtooltip");
    productizedService.appendChild(tooltiptext1);
    
    let services = document.getElementById("tt2");;
    services.classList.add("customtooltip");
    services.appendChild(tooltiptext2);
  }, 200);
</script>

The stylesheet is responsible for the appearance of the tooltip container and text. While the script code is responsible for displaying the tooltip itself.

The tooltip script has two elements, the createElement (“span”) and getElementById (ID), you can create these scripts as many as you’d like.

For the createElement (“span”), you can update the variable, as for the sample script above it is set as “tooltiptext1” If you want to update the tooltip text, change the value where says in the sample variable tooltiptext1.innerText“.

For the getElementById, you can update the value that says productService, services, tt1, tt2. These values (productService, services) are just responsible to call the object (customtooltip) from the stylesheet and append the variable from the first element.

On the field where you want to add the tooltip, add the tags “span” and ID values”.

Watch the video below to learn more about how this works.

Second Option: Using DT level script

To add the script, go to the Global Level Scripts via Admin> Scripts, and click the Add button.

Copy and paste the code below:

<style>
  /* Tooltip container */
  .ctt {
    position: relative;
    display: inline-block;
    font-size: 10px;
    font-weight: bolder;
    background-color: black;
    color: white;
    padding: 2px 5px;
    border-radius: 50%;
  }

  /* Tooltip text */
  .ctt .cttt {
    visibility: hidden;
    width: 180px;
    background-color: #555;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    padding: 5px;
    border-radius: 6px;

  /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 23px;
    left: -87px;
    margin-left: 0px;

  /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
  }

  /* Tooltip arrow */
  .ctt .cttt::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }

/* Show the tooltip text when you mouse over the tooltip container */
  .ctt:hover .cttt {
    visibility: visible;
    opacity: 1;
  }
</style>

Please take note: Add the script in the Above<head> so the script loads faster.

On the field where you want to add the tooltip, add the tag “span” and the classes you created.

These class values (ctt,cttt) is responsible to call the object from the stylesheet and apply the customization written in the stylesheet.

Watch the video below to learn more about how this works.

For any concerns or issues regarding this, please send an email to help@leadshook.com.

Leave a Reply

Your email address will not be published.