››

How to Create a Tooltip

ProProfs Knowledge Base lets you add tooltips to briefly explain complex terms and add value to the overall user experience. 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 the graphical user interface.

Benefits of Tooltips:

Help users understand the topic better
Attract users’ attention to new features

Below is a preview of a tooltip:

In this article, you will learn:

1. Adding a Tooltip to a Website

2. Adding Multiple Tooltips

3. Adding a Tooltip to a ProProfs Page

4. Editing a Tooltip

How to Add a Tooltip to a Website

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

Step 2: Enter the required details.

Name: Enter the tooltip name used to recognize the tooltip. It is hidden from the users.
Description: This is used to describe the tooltip content. It is hidden from the users.
Custom ID: This is automatically generated. But you can enter your custom ID as well. Please note that it shouldn't contain any numeric characters.
Width/Height: Adjust the width of the box where 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 cursor's position.
Auto-Close: Enable this option if you want the tooltip to close automatically by moving the cursor away from the link.
Enter the tooltip text in the large text box provided.
Preview: This is to preview the tooltip.
Use HTTPS (secure): Check the box if your website or web application runs on //https (SSL).
Use Custom ID: Check the box if you've provided your Custom ID.

Tooltip style and CSS

CSS (Cascading Style Sheets) stores a webpage's style presentation information (such as colors, fonts, layout, etc.). ProProfs allows you to control the CSS for the tooltips you create independently. It will enable you to have a distinct style for your tooltips.

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

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 elements 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 light blue.
border: 1px solid #FF9900 // This is the border color around the tooltip.

Step 3: Copy the code snippet and paste it 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 to place the tooltip. They'll do the rest. Save when you're done.

How to Add Multiple Tooltips to Your Website

Are you adding multiple tooltips to a single webpage and not wanting 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>

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>

How to Add a Tooltip to a ProProfs Page

Step 1: Go to +Add New > New Tooltip on the dashboard. Enter details.

Step 2: To add a tooltip to a ProProfs page, 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.

Step 3: 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 created initially. It ensures that the tooltip is shown with the correct name on the intended ProProfs page.

Now, taking the example of the screenshot in Step 2, the updated code should read as

Sample Code

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

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

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

Step 5: Go to the Source to access the page's code. Copy the updated code from Step 3 and paste it into the source code where you want the tooltip to appear.

Once done, click save.

Here's what the tooltip looks like after applying it on a ProProfs page.

How to Edit a Tooltip

You can easily view and edit the tooltips you’ve created.

Step 1: Go to Preview > View Tooltips.

Step 2: Under View Tooltips, you can:

View all the tooltips you’ve created as a list.
Create a new tooltip.
Click on the title to open it for editing.
Select the checkbox and click Delete to remove a tooltip.
Preview tooltip content by hovering the cursor over View.
Click the dropdown arrow to sort a given tooltip attribute in your preferred order. You can also select/deselect columns from appearing.

That is all about tooltips in the ProProfs Knowledge Base.

Related Articles:

Was this information helpful?

Thank you Your feedback helps us to continually improve our content.