How to apply a jQuery tooltip
Overview
A tooltip is a tool that helps us provide more detailed information about specific areas of our website. The goal is to enhance the website’s interactivity to make it more user-friendly.
What is a jQuery tooltip?
A tooltip provides additional information about specific tags or fields on a website. We achieve this by calling the jQuery tooltip() method on the target element of our page. Let's take a look at the example below:
Code
Explanation
We apply a tooltip to the input field in the code above to provide extra information.
-
Lines 7–10: We link the
jQuery CSSandJSlibraries so that we can use thetooltip()method. -
Lines 12–14: We call the
tooltip()method ondocument. This enables us to add a tooltip to the input infield. -
Line 26: We add a
tooltipto the input field. This input field has an attributetitlethat gives extra information for thetooltipto display.
Note: The attribute
titleis displayed when the user hovers the cursor over the input field.
