How to Create a Tooltip

A Tooltip is a short informational text that appears when the mouse pointer hovers over an icon (such as a question mark), image, hyperlink, or any other element in a graphical user interface. A tooltip is meant to provide instant explanatory text. For example, technical terms present in a web form can have tooltips providing users helpful information using short descriptions.

Below is an example of what a tooltip is:

Tooltip

In this article, you'll learn:

Here's how you can create a tooltip on a website:

Step 1: On your ProProfs Knowledge Base dashboard, go to + Add New >> Tooltip.

Tooltip settings

Step 2: Enter the required details.

Create a tooltip

Name: Enter the tooltip name that will be used to recognize the tooltip. This is hidden from the users.
Description: This is used to describe the tooltip content. This is also hidden from the users.
Custom ID: This is automatically generated. But you can enter your own. Please note that it shouldn't contain any numeric character.
Width/Height: Adjust the width of the box in which the tooltip text appears. The height is adjusted automatically.
Offset: X and Y offsets indicate how much left or right the tooltip box appears to the position of the cursor respectively.
Auto-Close: Enable this option if you want the tooltip to close automatically on moving the cursor away from the link.
Enter the tooltip text in the large text box provided.
Test Here: This is to preview the tooltip.
Use https (secure): Check this in case your website or web application runs on //https (SSL).
Use Custom ID: Check this if you've provided your own Custom ID.

Tooltip style and CSS

CSS (Cascading Style Sheets) stores style presentation information (such as colors, fonts, layout, etc.) of a webpage. ProProfs provides you the option to independently control the CSS for the tooltips you create. This allows you to have a distinct style for your tooltips compared to the webpage content it is being applied to.

Step 2.1: To edit the CSS of the tooltip, click on the CSS button.

Tooltip CSS

Step 2.2: You can change the box color, fonts, shadows, and other attributes of the tooltip. When you're done, click OK and save.

Here are some pointers that you can change based on your preferences:

Sample Code

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.

Edit tooltip CSS code

Step 3: Copy the code snippet and paste on your website where you want the tooltip to appear. If you have a developer working on your website, give them the code and tell them where you want it. They'll do the rest. Save when you're done.

Copy tooltip code

How to add Multiple Tooltips to Your Website

If you are adding multiple tooltips to a single webpage and do 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.

Sample Code

<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://site.helpdocsonline.com/ID246">Lorum Ispum</a>

Now copy the highlighted code and move the same into the <head> tag. Place the rest of the code in the <body> tag.

Example

<!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">
<head>
<title>Untitled Document</title>
<script src="http://www.helpdocsonline.com/jquery-1.7.2.min.js"></script>
<script src="http://www.helpdocsonline.com/v2/tooltips.js"></script>
</head>
<body>

<a href="#" title="tip:http://site.helpdocsonline.com/ID246">Lorum Ispum</a>

<a href="#" title="tip:http://site.helpdocsonline.com/ID185">business phone</a>
</body>
</html>

To create a tooltip on a ProProfs page:

Step 4: You do not have to copy/paste the entire code snippet, to a ProProfs page, as explained above. Instead, just take the Custom ID (ID*****) of the tooltip from the code snippet.

Note: You only require the numerical part from "ID*****", as shown in the screenshot below.

Tooltip ID

Step 5: You are required to put that numerical value in the following code:

To do that, replace "183" in the "id=183" with the new numerical value. Furthermore, replace the text "link name" in the code with the tooltip name you gave during its creation. This is to ensure that the tooltip is shown with the correct name on the intended ProProfs page.

Now, taking the example of the screenshot in Step 4, the updated code should now read:

Sample Code

<a class="hq-tip" href="id=74767">Knowledge Base</a>

Alternatively, if you've provided a specific Custom ID, you can use that too instead of the auto-generated numerical ID.

Step 6: Open the ProProfs page for editing where you want the tooltip to appear.

Edit webpage

Step 7: Go to the Source to access the code of the page. Copy the updated code from Step 5 where you want the tooltip to appear and save.

Webpage source