jQuery Simple Tooltip on Hover – simpleTooltip

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.