Tooltiper - Simple Jquery Tooltip
close
Tooltiper - Simple Jquery Tooltip

Tooltiper - Simple Jquery Tooltip

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

<span class="tooltiper" data-tooltip="Text inside tooltip">Text That Shows Tooltip</span>

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.



Save It As style.css :

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");

* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  color:#111;
  background: transparent;
  border:none;
}

body {
  background: #f3f3f3;
  font-family: "Montserrat", sans-serif;
}

h1, h2, h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}

.wrap {
  width: 90%;
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

header {
  height: 450px;
  background: #fff;
  text-align: center;
}

header h1 {
  font-size: 72px;
}

.content .wrap {
  top: 100px;
  transform: none;
  -moz-transform: none;
  -webkit-transform: none;
}

.content .wrap p {
  margin-bottom: 30px;
  line-height: 1.8em;
}

.tooltiper {
  position: relative;
  display: inline-block;
  color: tomato;
  perspective:600px;
  transform-style: preserve-3d;
}

.tooltiper .tooltip {
  min-width: 100px;
  max-width:350px;
  position: absolute;
  font-size: 0.7rem;
  text-align: left;
  background: tomato;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  display: block;
  top: 0;left: 0;
  line-height: 1.4em;
  transform: rotateX(90deg) translateZ(0px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.64, 0.57, 0.67, 1.53), opacity 0.1s ease-out 0.1s;
}
.tooltiper:hover .tooltip {
  transform: rotateX(0) translateZ(20px);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.64, 0.57, 0.67, 1.53), opacity 0.1s ease-out;
}
.tooltiper .tooltip:after {
  content:"";
  position: absolute;
  left: 20px;
  bottom: -7px;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: tomato transparent transparent transparent;
}


In my case I have set the default color tomato you can change it whatever you want.


So we have written HTML markup and customised it and now we will add some functionality in this project (Tooltiper - Simple Jquery Tooltip).



To make this project (Tooltiper - Simple Jquery Tooltip) work properly for that we will use JavaScript.



So here is a JavaScript for our project (Tooltiper - Simple Jquery Tooltip) and also save it with the filename as provided. Make a new directory called js and put this file to that directory

.


Save It As index.js :

$(document).ready(function(){
  toolTiper();
});

function toolTiper(effect) {
  $('.tooltiper').each(function(){
    var eLcontent = $(this).attr('data-tooltip'),
        eLtop = $(this).position().top,
        eLleft = $(this).position().left;
    $(this).append(''+eLcontent+'');
    var eLtw = $(this).find('.tooltip').width(),
        eLth = $(this).find('.tooltip').height();
    $(this).find('.tooltip').css({
      "top": (0 - eLth - 20)+'px',
      "left":'-20px'
    });
  });
}

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.



  • Tooltiper - Simple Jquery Tooltip
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Tooltiper - Simple Jquery Tooltip) File :

Tooltiper - Simple Jquery Tooltip.zip
File Size 3.28 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


I hope that you will like my this post and if you do then please share it with your friends and keep visiting this site for more this kind of projects and tutorials.



Thank you !


Disqus Codes

No comments

Notifications

Disqus Logo