Hello guys In this tutorial we are going to learn how to create tooltip in html using css on hover and show a div box like css infobox, you can use this css tooltip in to show dynamic content also this tooltip will have a css tooltip arrow and show text with an image on hover.

So please keep going on and follow up with me if you like to watch this tutorial as video tutorial you can watch here.

Or you can only copy paste the code on your editor and try to make this css tooltip on your own. it's going to be fun.

Create folder project with files

You only need to create a folder with all the necessary files which are for instance are index.html and style.css and also a folder where you'll put your images I'll name it imgs.

Writing the HTML code for tooltip

Now that you have prepared your folder project let's start writing the actual HTML code and structure our web page.

We'll assume that the tooltip div content will be shown when the user hover on the image, this CSS tooltip will be shown only using CSS and we are not going to use JavaScript code in this tutorial.

Basically this tooltip will works just like a dynamic content to show text with an image on hover.

Here is our HTML snippet code, let's copy it to our editor and dive into what every element is going to do.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSS Tooltip</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<body>
    <div class="container">
        <div class="profile">
            <div class="content">
                <div class="header">
                    <img src="imgs/jeams.jpg" alt="Jeams Middlman">
                    <div class="infos">
                        <h3 class="name">Jeams Middlman</h3>
                        <p class="title">Web Developer / We Desinger</p>
                    </div>
                </div>
                <div class="body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et accusamus odio itaque, qui explicabo laboriosam minima, at
                    aliquid quidem, officiis labore commodi cupiditate! Repellendus, maxime.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I think it's clear and you can understand just from the first look to this code, after creating my HTML template I just add div with container class just because I want to center the content in the screen. inside this div I added another div this time with class of profile, this one will appear as circle of user avatar so that the user when he hovers over this circle the tooltip will appear on top of that avatar. Inside this div I add another div with class of content which contain two div elements the .header and body, the header contain the picture and name of the user and his title or job, and the body will contain a brief description.

That's it for HTML code let's move now to make this a little good looking by adding CSS code.

Writing the CSS code for tooltip

Just like HTML code, let's copy past first this code and try to understand it later.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Open Sans", sans-serif;
}
.container {
  display: flex;
}

.profile {
  position: relative;
  width: 60px;
  margin: 0 1em;
  height: 60px;
  border-radius: 50%;
  background: url(imgs/jeams.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #246df5;
  transition: 0.2s;
}

.profile:hover {
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #d10fd8;
}

.content {
  position: absolute;
  bottom: 75px;
  padding: 20px;
  min-width: 400px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 10px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: 0.5s;
}

.content .header {
  display: flex;
  align-items: center;
}
.content .header img {
  grid-column: 1/2;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.content .header .infos {
  margin-left: 1em;
}
.content .header .infos .name {
  font-size: 1.25em;
  color: #333;
  letter-spacing: 1px;
  font-size: 600;
}

.content .header .infos .title {
  font-size: 0.9em;
  color: #969696;
  font-weight: 500;
}

.content .body {
  padding: 1em;
}

.content .body p {
  font-size: 0.95em;
  color: #272727;
}

.profile:hover .content {
  visibility: visible;
  opacity: 1;
  transform: translateX(-15%) translateY(0px);
}

You may notice that we started with

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This will reset our page and add zero padding and margin and also the issue of border and padding.

We added this

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Open Sans", sans-serif;
}

We display the body with flex property and center the content of the page both vertically and horizontally. this will only works if you give a height to the body element we give it 100vh which means it will take the full height of the device, and lately we add font-family which we had linked to in our HTML.

I think that the rest is evident, I'm not going to explain every piece of property because it's going to be just boring, try understand it yourself if you have any problems or issues just let me know I'm happy to help you.

Result of showing tooltip on hovering

Now that we have did everything correctly let's see our result in the browser. tooltip on hovering

On hovering

tooltip on hovering