loading Loading...
add chat to your website

How to Create a New Tooltip


End users love informative clues. Whatever questions and misunderstandings might occur, delivering precise answers immediately is most important. Tooltips can provide such hints. Input fields in web forms are a perfect example of such a situation.  When an end user hovers the cursor over a link, a tooltip will appear. A tooltip is a small "hover box" with information about the item being hovered over. Learn More about tooltips.

See more examples of tooltips
Traditionally, developers hard-coded tooltips into their websites or web applications. This makes it very difficult for a company to change the content because the code would have to be updated and redeployed. ProProfs solves this problem by allowing you to manage the tooltip content in ProProfs. Any changes or updates will automatically update your website or web app.

ProProfs will generate a small JavaScript snippet (as with lightboxes) that you can copy and paste to your website or web application wherever you want the tooltip to appear.

How to Create a Tooltip

Step 1 - Select new tooltip from menu

  1. In the toolbar, click New Tooltip
  2. A window will appear. Enter the fields and tooltip content as described below.
  3. Understanding optional fileds:
    • Name - This will be the name of the tooltip. It is used to identify the tooltip. End users will not see this.
    • Description - This is used to describe the tooltip's content. End users will not see this.
    • Custom ID - By default the tooltip will use a system generated ID. You can choose to use your own ID to call the the tooltip by entering your own here. Please note that the Custom ID cannot be numeric, it should be in string format like (proprofs-help, proprofs-search) etc. 
    • Width - This is the width of the tooltip. The default will be 250 pixels.
    • Height - This will be automatic as the tooltip will grow to hold the content.
    • Offset - Offset of the end user's cursor
      • X - This is the offset (left to right) of the end user's cursor. You can use negative numbers such as -150 if you want the tooltip to appear in the left side of the end user's cursor.
      • Y -  This is the offset (left to right) of the end user's cursor. You can use negative numbers such as -150 if you want the tooltip to appear in the above the end user's cursor.
    • Auto-Close - If you don't want the tooltip to close automatically uncheck this box. To close the tooltip, the user will be required to click the close icon or click outside the tooltop box.
    • Editor - This is a slimmed down version of the content editor used to create ProProfs pages. This is where you enter the content for the tooltip. To change the style of the content see below.
    • Test Here - Clicking the Test Here link is a quick way to preview what the tooltip will look like. This is an exact preview.
    • Use https - If your website or web application runs on https:// (SSL) then check this box. This will update the link in the code from http:// to https://
    • Use Custom ID - If you define a custom ID, you may tick this option to generate code snippet with custom ID.
    • Save - To save the tooltip and generate the code snippet, click Save.
    • Cancel - Click Cancel to cancel and close the window.

Step 2 - Copy the code snippet

Once the tooltip has been saved, the code snippet will appear.

  1. Select all text in the input box, right-click, and select Copy.
  2. Click Save again to save and close the window.


Step 3 - Paste the code in your website or web application

The next step is to add the code to your website. To do this, simply copy and paste the code snippet to your website where you want the tooltip to appear. It will insert a hyperlink to open the tooltip when the cursor hovers over it. If you work with a developer, simply copy the code, and email it to the developer.


Here is an example of tooltip code added to a basic HTML webpage:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://www.helpdocsonline.com/tooltips.js"></script>
<a href="#" title="tip:http://site.helpdocsonline.com/ID246">Lorum Ispum</a>



Step 4 - Save and Preview

After you add the code to your webpage, save the webpage, and preview it.

The Code Snippet

This tooltip enhances the default "title" attribute of an HTML hyperlink. Integration is easy and unobtrusive, and for the sake of efficiency, the script will only use Ajax to load the tooltip's content the very first time the end user rolls over the link. We have added some //comments to help explain this sample code snippet.


<script src="http://www.helpdocsonline.com/jquery-1.7.2.min.js"></script>
<script src="http://www.helpdocsonline.com/v2/tooltips.js"></script>
<a href="#" title="tip:http://emailmarketingco.helpdocsonline.com/ID246">Lorum Ispum</a>

">Lorum Ispum</a> // this can be text, image, or anything you want to use for the hyperlink to activate the tooltip.


Adding Multiple Tooltips to a Website

If you are adding multiple tooltips to a single webpage, you will not want to load the JavaScript file more than once.  The solution is to move the JavaScript script file to the head of your webpage.

Then for each tooltip you add to the webpage, delete the JavaScript reference since it is already in the <head> of your webpage. We have inserted //comments below to help explain.


<script src="http://www.helpdocsonline.com/jquery-1.7.2.min.js"></script> //delete
<script src="http://www.helpdocsonline.com/v2/tooltips.js"></script> //delete
<a href="#" title="tip:http://site.helpdocsonline.com/ID246">Lorum Ispum</a>


Here is an example of a webpage with two tooltips:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Untitled Document</title>
<script src="http://www.helpdocsonline.com/jquery-1.7.2.min.js"></script> //moved to head of page
<script src="http://www.helpdocsonline.com/v2/tooltips.js"></script>  //moved to head of page
<!--tooltip 1-->
<a href="#" title="tip:http://site.helpdocsonline.com/ID246">Lorum Ispum</a>
<!--tooltip 2-->
<a href="#" title="tip:http://site.helpdocsonline.com/ID185">business phone</a>


Adding a Tooltip to a ProProfs page

You can also add a tooltip to any ProProfs page. You will need to insert this hyperlink in the pages source.


<a class="hq-tip" href="id=183">link name</a>


Where id=XXX is the ID of the tooltip. You can find the ID of the tooltip in the tooltip creation overlay. You may also use custom ID if you define one in the tooltip generator.



<a class="hq-tip" href="id=resetpassword">link name</a>


Tooltip Style and CSS

Tooltips are formatted and styled by CSS. CSS stands for Cascading Style Sheets. It allows you to store style presentation information (such as colors, fonts, layout, etc.) separately from your HTML structure. This allows precise control of the tooltip style.

You can change the box color, fonts, shadows, and other attributes of the tooltip. The CSS used for tooltips is separate from the CSS used for pages.

To edit the page's CSS, press the  toolbar button. An overlay will appear displaying all your CSS. You can add or edit the CSS as you wish. However, do not change the class name from .tooltip { }

Here are some key styles you could change:

  • font: 12px Arial, Helvetica, sans-serif;  // This is the font family.
  • background: #FFF4E3; // This is the color of the tooltip. The default is a light blue.
  • border: 1px solid #FF9900; // This is the border color around the tooltip.

This is a link to a nice hex color generator: http://www.2createawebsite.com/build/hex-colors.html


You cannot create multiple CSS styles for tooltips right now. We are working on this feature for future releases.

Updating Content

Once you have added the code snippet to your webpage or web application, you do not have to worry about making any updates on your webpage. You do not have to copy and paste the code to your webpage each time you make an update in ProProfs. Any updates you make in ProProfs to a tooltip's content will instantly update the tooltip on your webpage. Our goal is to make help content management easy for you.

Related Articles:

View, Edit, and Delete Tooltips
How to Add and Publish a Page