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.

[intro_ad]

Plugin Overview and Preview

Plugin: simple-tooltip
Author: Jonas Arnklint
Category: Others
Published: January 20, 2024
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 7 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
3,700
[ad_after_overview]

Code Rating

[site_reviews_summary assigned_to=”post_id”]

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.
[site_reviews assigned_to=”post_id”]

Submit Your Review

[site_reviews_form assign_to=”post_id”]

[ad_after_artical]
About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...