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. How to Add a Tooltip to a Website
2. How to Add Multiple Tooltips
3. How to Add a Tooltip to a ProProfs Page
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:
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.
<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.
<!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>
<!--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>
</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.
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
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: