How to Create Link Tooltip Using CSS3 and jQuery?

CSS Web Development Front End Technology

In this article, we will look to approach to Creating Link Tooltip Using CSS3 and jQuery.

When an element or link hovers over, link tooltips are an excellent method to show more information. There are various methods for doing this. When a link hovers over, tooltips are utilized to offer additional information.

Multiple Approaches

We have provided the solution in different approaches.

By Using mouseenter and mouseleave functions of jquery.
By Using tooltip() function.
Using only CSS to create tooptips

Approach-1:By Using mouseenter and mouseleave functions of jquery

jQuery uses the mouseenter and mouseleave functions to carry out this action. −

The mouseenter event is fired at an Element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.The mouseleave event is fired at an Element when the cursor of a pointing device (usually a mouse) is moved out of it.

Syntax

In HTML, we use the following syntax of the mouseenter and mouseleave in the jquery −

addEventListener('mouseleave', (event) => {});
addEventListener('mouseenter', (event) => {});

Example

In the following section, we will design the code using mouserenter and the mouseleave function of jquery. A link named “Hover Over me! “ is created using the <a> tag and here when the user will hoover over this link a given text will appear to the user.

<!DOCTYPE html>
<html>
<head>
	<style>
		.tooltip {
			display: none;
			position: absolute !important;
			width: 200px;
			padding: 10px;
			margin: 0 0 3px 0;
			color: #fff;
			z-index: 1;
			font-size: 50px;
			text-decoration: none;
			text-align: center;
		}
		.tooltip:after {
			position: absolute !important;
			bottom: -14px;
			z-index: 1;
		}
		.tooltip:before {
			content: "";
			position: absolute !important;
			bottom: -14px;
			z-index: 100;
		}
	</style>
</head>
<body>
	<a href="#" class="link" title="Welcome to tutorials points" class="tooltip_link left">
		Hover over me!
	</a>
    <script>
		$("a").mouseenter(function (e) {
			var $x = e.pageX - this.offsetLeft;
			var $tooltip_text = $(this).attr("title");
			$(this).append('<div class="tooltip">'+ $tooltip_text + '</div>');
			$("a > div.tooltip.").fadeIn(300);
		});
		$("a").mouseleave(function () {
			$("a > div.tooltip.").fadeOut(300).delay(300)(function () {
				$(this).remove();
			});
		});
	</script>
</body>
</html>

After hovering mouse on “Hover over me!”, the output is

Welcome to tutorials points

Approach-2:By Using tooltip() function

Using jQuery UI − The tooltip widget of jQuery UI helps to customize tooltips. The tooltip() method is used to add tooltip to any element.

Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

jQueryUI provides tooltip() method to add tooltip to any element on which you want to display tooltip. This gives a fade animation by default to show and hide the tooltip, compared to just toggling the visibility.

Syntax

$(selector, context).tooltip (options) Method
$(selector, context).tooltip ("action", [params]) Method

Example

In the below code, we have used the tooltip() wedge to customize the created tooltip in the above example, here we have used the attribute type of the style tag of HTML and under it, we have added the properties as we want the tooltip should appear or is required by the user.

<!DOCTYPE html>
<html lang="en">
   <head>
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style type="text/css">
         .hi {
            text-decoration: none;
            color: blue;
         }
      </style>
   </head>
   <body>
      <a class="hi" id="myTooltip"href="#" title="Welcome to tutorials points">
         Hover Over me!
      </a>
      <script>
         $(function () {
            $("#myTooltip").tooltip();
         });
      </script>
   </body>
</html>

Approach-3: Using only CSS to create tooptips:

In this approach, we have only used the CSS to create tooltip as per the requirement. Manly using the hover property of the CSS which is responsible when the user hovers the mouse and it becomes the tooltips.

The − hover selector is used to selecting elements when you mouse over them.

Example

In this program, we are only using the CSS properties to create a tooltip as per the requirement. Here, when the user will hover over the link it will become tooltips and a given message will appear to the user.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            text-align: center;
         }
         .t_t {
            position: relative;
            display: inline-block;
            margin-top: 3rem;
         }
         .t_t .tooltiptext {
            width: 8rem;
            text-align: center;
            border-radius: 4px;
            background-color: blue;
            color: #fff;
            padding-top: 9px;
            padding-bottom: 9px;
            position: absolute;
            z-index: 1;
            bottom: 165%;
            margin-left: -55px;
            left: 50%;
            transition: opacity 0.5s;
            visibility: hidden;
         }
         .t_t .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: green
               transparent transparent;
         }
         .t_t:hover .tooltiptext {
            visibility: visible;
         }
      </style>
   </head>
   <body>
      <div class="t_t">Hover over me!
         <span class="tooltiptext">
            Welcome to tutorials Point
         </span>
      </div>
   </body>
</html>

Supported Browsers − The browsers supported by pointer-events Property are listed below −