loading Loading...
add chat to your website

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

 

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:

 

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

 

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

 

This is how the tooltip looks like after it is applied on a ProProfs page.

 

Tooltip on a webpage

 

Edit Tooltip Content

You can view all the tooltips you've created as well as edit each one of them if you want. To do that:

 

Step 1: Go to Preview >> View Tooltips.

 

View tooltips

 

Step 2: Under View Tooltips, you can:

  1. View all the tooltips you've created as a list.
  2. Create a new tooltip.
  3. Click on a tooltip name to open it for editing.
  4. Delete a tooltip.
  5. Preview tooltip content by hovering the cursor over View.

 

Edit tooltips and preview