WebSoftPrograms: How to make Tooltip in Css without Javascript

Hello! if you are searching for that How to create & show Tooltip on hover of image, we have made a program for it.

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div id="wrapper">
<h1>Css3 - Tooltip on Hover of Image</h1>
<br />
<div id="main">
<div class="thumb"><a title="Top - The Lion" class="tooltip-top"><img src="" /></a><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb"><a title="Right - The Tiger" class="tooltip-right"><img src=" /></a><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb"><a title="Left - The Wolf" class="tooltip-left"><img src="" /></a><!--Your Image Must Be 250px X 150px.--></div>
<div class="thumb"><a title="Bottom - The Crocodile" class="tooltip-bottom"><img src="" /></a><!--Your Image Must Be 250px X 150px.--></div>
<div class="clear"></div>
</div>
</div>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color:#ccc;
}

.clear{
 clear:both;
}
#wrapper{
 width:540px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
#main{
 width:100%;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
.thumb{
 float:left;
 width:250px;
 height:150px;
 margin:10px;
}
.thumb img{
 width:100%;
 height:100%;
 border:5px solid #fff;
}
.tooltip-top{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    display: inline;
    position: relative;
 text-align:center;
}
.tooltip-top:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 3px;
    top: -185px;
    color: #f60;
    content: attr(title);
    left: 6%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 200px;
}
.tooltip-top:hover:before{
    width: 0; 
 height: 0; 
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-top: 6px solid #333;
    top: -156px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.tooltip-right{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    display: block;
    position: relative;
 text-align:center;
}
.tooltip-right:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 3px;
    top:70px;
    color: #f60;
    content: attr(title);
    right: -250px;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 200px;
}
.tooltip-right:hover:before{
    width: 0; 
 height: 0; 
 border-top: 6px solid transparent;
 border-bottom: 6px solid transparent;
 border-right: 6px solid #333;
    top: 78px;
    content: "";
    right: -20px;
    position: absolute;
    z-index: 99;
}

.tooltip-bottom{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    display: inline;
    position: relative;
 text-align:center;
}
.tooltip-bottom:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 3px;
    bottom: -36px;
    color: #f60;
    content: attr(title);
    left: 6%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 200px;
}
.tooltip-bottom:hover:before{
    width: 0; 
 height: 0; 
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #333;
    bottom: -7px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.tooltip-left{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    display: block;
    position: relative;
 text-align:center;
}
.tooltip-left:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 3px;
    top:70px;
    color: #f60;
    content: attr(title);
    left: -240px;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 200px;
}
.tooltip-left:hover:before{
    width: 0; 
 height: 0; 
 border-top: 6px solid transparent;
 border-bottom: 6px solid transparent;
 border-left: 6px solid #333;
    top: 78px;
    content: "";
    left: -10px;
    position: absolute;
    z-index: 99;
}

DOWNLOAD PROJECT SOURCE

How to make Tooltip in Css without Javascript

No comments:

Post a Comment