Tooltiper - Simple Jquery Tooltip

A tooltip is a simple tip that shows up when you hover over, Mouse over or click on any element.

Here today I am having a beautiful tooltip made with CSS and jQuery you just have a look on them above.

Good day people today we are going to make Tooltiper - Simple Jquery Tooltip. As you know the HTML markup is essential for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Tooltiper - Simple Jquery Tooltip</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section align="center" class="content">
<div class="wrap"><p><span class="tooltiper" data-tooltip="Siri, Google Now, Alexa, and Slackbots">Machine learning</span> techniques have progressed to the point where a new user interface is on the cusp of mass-market adoption: computer systems that understand enough natural human language to be useful and respond accordingly.
Siri, Google Now, Alexa, and <span class="tooltiper" data-tooltip="Bla bla blabla bla bla bla">Slackbots</span> are a few high-profile examples of voice or message-driven experiences that have gained some level of real-world use. Indeed, these and other AI systems are now open enough, and of high-enough quality, <span class="tooltiper" data-tooltip="Siri, Google Now, Alexa, and Slackbots">to</span> allow brands to begin interacting with customers and prospects through natural language. The result is the beginning of a new era in customer relationships that promises to be every bit transformative as social media and mobile devices were in the last decade.
</p></div>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>

Above is the example code but for you if you want to add that tooltip to your text you can use that code which is provided below

You can make tooltip from any element for that you have to give that element a class name tooltiper and add attribute named as data-tooltip and give that attribute the value of that text which you want to show as a tooltip.

Without CSS our this script (Tooltiper - Simple Jquery Tooltip) will never look fascinating. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

Above is a simple jQuery function that allows you to make tooltip work properly. That's it you can try it on your own, make customizations as you want.

I used to get tooltip value from an attribute called data-tooltip you can change the attribute but for that you have to change it on two places one in the above JavaScript code and second in that HTML tag your element where you want to make tooltip.

Result :

So here we are, We have done and our project Tooltiper Simple Jquery Tooltip is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.