jQuery Simple Tooltip on Hover – simpleTooltip

Yet another tooltip plugin for jQuery to create simple tooltip on hover. The “simple-tooltip” is a lite, easy-peasy, clean and fully customizable tooltip plugin for jQuery. You can show tooltip with any HTML element (like links, buttons, span etc) with custom CSS design. You just need to define title attribute of that element then this plugin will show its magic.

Plugin Overview and Preview

Plugin: simple-tooltip
Author: Jonas Arnklint
Category: Others
Published: November 17, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 7 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
128 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

How to Create jQuery Simple Tooltip On Hover

1. In order to create jQuery simple tooltip on hover we need to start with “simple-tooltip” plugin. So, first of all load the jQuery into your website project.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. Ok! now, include plugin’s JavaScript file in your HTML document.

<!-- simple-tooltip JS -->
<script src="js/jquery.simple-tooltip.js"></script>

3. Create HTML link (or any other element) with title attribute.

      <p>
        This plugin is made by <a href="http://arnklint.com" id="my-link" title="Web developer from UmeƄ in Sweden">Jonas Arnklint</a>
      </p>

4. Style your tooltip with CSS.

      #v-tooltip {
        position:absolute;
      	background:#000;
      	padding:3px 5px;
      	color:#fff;
      	font-size: 11px;
      	font-family: Arial, Verdana, sans-serif;
      	display:none;
        -moz-border-radius: 3px;
      	-webkit-border-radius: 3px;	
      }

5. Finally, call the simple-tooltip plugin (with #my-link selector) in jQuery document ready function to active the tooltip.

$(document).ready(function(){
	$('#my-link').simpleTooltip();
});

For more advance usage, please check the Configuration Options tab.

Advance Configuration Options for jQuery simple Tooltip on Hover

The following are some advanced configuration options to create / customize jQuery simple tooltip on hover.

Option Default Type Description
title null String Define the title tooltip.

Example:

$(element).simpleTooltip({
	title : null,
}); 
xOffset 10 Number It define the x offset for tooltip.

Example:

$(element).simpleTooltip({
	xOffset : 10,
}); 
yOffset 20 Number The y offset of tooltip.

Example:

$(element).simpleTooltip({
	yOffset : 20,
}); 
delay 400 Number Delay in milliseconds after that tooltip will be fade in.

Example:

$(element).simpleTooltip({
	delay : 400,
}); 
overrideElementTitle false Boolean Decide whether to override element title attribute.

Example:

$(element).simpleTooltip({
	overrideElementTitle : false,
}); 

Changelog

22/10/2019

  • Updated dependency (jQuery) to latest version.

There are no reviews yet. Be the first one to write one.

Submit Your Review