Using Tooltips on your Website

Tooltips aid the User Experience of your website by allowing you to add a bit more information to help guide visitors.

Sometimes the User Experience (UX) of your website needs a nudge - a bit more information in case the user doesn't know where to go next. Tooltips allow you to add a bit more information to help guide your website visitors through the User Experience.

Below is the HTML, CSS, and JavaScript required.

Step 1 - Add the HTML below to your website and modify the tooltip placement and content accordingly.

<div class="container">
  <div class="jumbotron">
    <h1>Using Tooltips</h1>
    <p>  Hover over the features underneath each plan to see tooltips that give you more information about the feature..</p>
  </div>
</div>
<section class="pricing-boxes">
  <div class="container">
    <div class="boxes-container">
      <div class="row">
        <div class="col-md-4">
          <div class="pricing-item pricing-item1">
            <div class="pricing-box">
              <div class="outside-content top-content">
                <h2>Basic</h2>
                <p class="price"><sup>$</sup>99<span>/MO</span></p>
                <p><span class="box-server">Starting at</span></p>
              </div>
              <div class="inside-content">
                <p class="buy-btn"><a class="btn" onclick="ga('send', 'event', 'Pricing Page', 'try now click', 'try now button pricing page'); redirectTOPrice('small');">Try Now</a></p>
              </div>
              <div class="outside-content">
                <ul>
                  <li>
                    <div class="qtip-div" help-data="Includes a flexible, highly scalable way to manage your contacts, leads, and opportunities." style="cursor: help; width:inherit;">
                      Hosting & CRM Included
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Storage is a simple and scalable way to store, access, and share data over the Internet." style="cursor: help; width:inherit;">
                      10 GB Storage
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Additional memory allows more programs to run at one time and allows processes to run faster with more room to work with." style="cursor: help; width:inherit;">
                      2 GB Memory
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes support via email and chat from our team of Technical Account Managers." style="cursor: help; width:inherit;">
                      Email & Chat Support
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="pricing-item pricing-item1">
            <div class="pricing-box">
              <div class="outside-content top-content">
                <h2>Team</h2>
                <p class="price"><sup>$</sup>249<span>/MO</span></p>
                <p><span class="box-server">Starting at</span></p>
              </div>
              <div class="inside-content">
                <p class="buy-btn"><a class="btn" onclick="ga('send', 'event', 'Pricing Page', 'buy now click', 'buy now medium button pricing page'); redirectTOPrice('medium');">Buy Now</a></p>
              </div>
              <div class="outside-content">
                <ul>
                  <li>
                    <div class="qtip-div" help-data="Includes a flexible, highly scalable way to manage your contacts, leads, and opportunities." style="cursor: help; width:inherit;">
                      Hosting & CRM Included
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Cloud storage is a simple and scalable way to store, access, and share data over the Internet." style="cursor: help; width:inherit;">
                      50 GB Storage
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Additional memory allows more programs to run at one time and allows processes to run faster with more room to work with." style="cursor: help; width:inherit;">
                      4 GB Memory
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes support via email and chat from our team of Technical Account Managers." style="cursor: help; width:inherit;">
                      Email & Chat Support
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes automated daily backups of your server instance(s) for increased security." style="cursor: help; width:inherit;">
                      Daily Backups
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes a dedicated IP (Internet Protocol), a unique Internet address dedicated exclusively to your hosting account. This is in contrast to the normal configuration of several hosting accounts residing on a single server and sharing its IP address." style="cursor: help; width:inherit;">
                      Dedicated IP
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="pricing-item pricing-item2">
            <div class="pricing-box pricing-boxes2">
              <div class="outside-content top-content">
                <h2>Enterprise</h2>
                <p class="price"><sup>$</sup>1,499<span>/MO</span></p>
                <p><span class="box-server">Starting at</span></p>
              </div>
              <div class="inside-content">
                <p class="buy-btn"><a class="btn btn-white" onclick="ga('send', 'event', 'Pricing Page', 'buy now click', 'buy now large button pricing page'); redirectTOPrice('large');">buy now</a></p>
              </div>
              <div class="outside-content">
                <ul>
                  <li>
                    <div class="qtip-div" help-data="Includes a flexible, highly scalable way to manage your contacts, leads, and opportunities." style="cursor: help; width:inherit;">
                      Hosting & CRM Included
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Distributes incoming traffic across multiple EC2 instances, in multiple Availability Zones. This increases the fault tolerance of your applications." style="cursor: help; width:inherit;">
                      Load Balancer
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes 3 T2 Large Server Instances that provide a baseline level of CPU performance with the ability to burst above the baseline." style="cursor: help; width:inherit;">
                      3 Large Web Servers
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Cloud storage is a simple and scalable way to store, access, and share data over the Internet." style="cursor: help; width:inherit;">
                      50 GB Storage
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Additional memory allows more programs to run at one time and allows processes to run faster with more room to work with." style="cursor: help; width:inherit;">
                      8 GB Memory
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes support via email and chat from our team of Technical Account Managers." style="cursor: help; width:inherit;">
                      Email & Chat Support
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes phone support with a member of our technical support staff." style="cursor: help; width:inherit;">
                      Phone Support
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes training customized to the needs of your business." style="cursor: help; width:inherit;">
                      1 Training Seat
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes annual performance and security assessments to keep you and your customers up and running at the highest levels of efficiency." style="cursor: help; width:inherit;">
                      Annual Reviews
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes automated daily backups of your server instance(s) for increased security." style="cursor: help; width:inherit;">
                      Daily Backups
                    </div>
                  </li>
                  <li>
                    <div class="qtip-div" help-data="Includes a dedicated IP (Internet Protocol), a unique Internet address dedicated exclusively to your hosting account. This is in contrast to the normal configuration of several hosting accounts residing on a single server and sharing its IP address." style="cursor: help; width:inherit;">
                      Dedicated IP
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Step 2 - Download the CSS below and include it in your web page

tooltips.css

Step 3 - Add the JavaScript below to your web page to initialize the Tooltip plugin.

$(document).ready(function() {
  $('.qtip-div[help-data]').qtip({ 
    content: {
      attr: 'help-data' // Tell qTip2 to look inside this attr for its content
    },      
    position: {
      my: 'center left',  // Position my top left...
      at: 'center right', // at the bottom right of...           
    },
    style: { 
      classes: 'qtip-tipsy myCustomClass'// Inherit from preset style        
    }
  });
});

Step 4 - Add the includes below to the header of your webpage to initialize Bootstrap and jQuery.

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css">

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev

Using Tooltips on your Website

Step 1 - Add the HTML below to your website and modify the tooltip placement and content accordingly.

Step 2 - Download the CSS below and include it in your web page

Step 3 - Add the JavaScript below to your web page to initialize the Tooltip plugin.

Step 4 - Add the includes below to the header of your webpage to initialize Bootstrap and jQuery.

Sign up to explore

Platform

Explore

Company