Creating CSS Tooltip for your website

css-tooltip

css-tooltip

CSS tooltip Tutorial

CSS Tooltip: It is an information shown on a page when we hover on any text, and we find a small box opening This is a tooltip. CSS Tooltip is made with the help of HTML and CSS only, we havent used JQUERY for making this tooltip.

Where we can use CSS tooltip:

CSS Hover effect is one of the most widely used event, css hover when coded with css animation can create stunning effects on any webpage. CSS Tooltip is a small example where we will be using CSS Hover effect.

We can use CSS TOOLTIP when we want our visitor to see some information, we can information in tooltip in static way, as well as some DATABASE driven value also.

Why CSS TOOLTIP not JQUERY.

CSS Tooltip is lightweight as compare to jquery, as we dont need any external files to download, as its your own wish to use JQuery or CSS, as because of css animation we can add smooth effect in our css tooltip.

Now lets move to create a CSS Tooltip.

HTML:
We will be creating html part first.

There are basically two things we will be needing for creating a tooltip.
1. a portion or Text on which we will hover
2. the information area to be shown while we hover on the text.

so here is the code

“<div class=”Container”>
<div class=”SimpleText”>
<span>Hover On Me</span>
<span class=”HoverText”>This is a example of Css ToolTip
<div class=”Triangle”></div>
</span></div>
</div>”

We can see above we can see a div that has been added, we will be applying style to this Div to make it a triangle in this css tooltip tutorial.

Now comes the styling part, we will writing css fro this tutorial.

.Container{margin:30%; position: relative;}
.HoverText, .SimpleText{
display:block
}
.SimpleText span{
color:#444;
font-family:Arial;
font-size:15px;
cursor:pointer;
}
Div.SimpleText span.HoverText{
border: 3px solid #0C9B95;
margin: -100px 0;
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: #0C9B95;
color:#fcfcfc;
font-size:14px;
display:none;
position: absolute;
}
.SimpleText:hover .HoverText{display:block }
.Triangle{
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #0DA19B transparent transparent transparent;
margin-top: 12px;
margin-left: 10px;
position: absolute;}

Above tooltip is all about applying css position. here we can see we have styled the first div and span by giving position relative and than other two inner div position to absolute.
Also we applied some css tricks to make a triangle.

This tutorial can also be useful for you.

Here is the Result:

CSS Tooltip Demo 2:

You Might Also Like

222 Comments

  1. 2
    • 3
    • 4

      That menu is a list of the pages. To add more, just go into the WordPress admin panel: under Pages click Add New Those pages should then show in the menu.No coidng necessary

  2. 5

    First of all thanks for tutorial. one issue is when i scroll to bottom,tool tip is not displaying in bottom. I have checked in chrome.

  3. 6
  4. 7
  5. 8

Comments are closed.