change the background color of tooltip which is title of the div - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Tooltip

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Tooltip

Description

change the background color of tooltip which is title of the div

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.tooltip{padding:20px 0;}
.tooltip div {<!--   w w  w . j a va  2 s. c  om-->
   background-color: blue;
   text-align: right;
   padding: 3px;
   margin: 1px;
   color: white;
}
#column1 {
   background-color: blue;
   text-align: right;
   padding: 3px;
   margin: 1px;
   color: white;
   display: inline-block;
   position:relative;
}
#column1:after{
   content:attr(data-title);
   position:absolute;
   bottom:100%;
   left:100%;
   color:#fff;
   background:#000;
   padding:5px;
   display:none;
}
#column1:hover:after{display:block;}
#column2 {
   background-color: Red;
   text-align: right;
   padding: 3px;
   margin: 1px;
   color: white;
   display: inline-block;
   position:relative;
}
#column2:after{
   content:attr(data-title);
   position:absolute;
   bottom:100%;
   left:100%;
   color:#000;
   background:#eee;
   padding:5px;
   display:none;
}
#column2:hover:after{display:block;}


      </style> 
 </head> 
 <body> 
  <div class="tooltip"> 
   <div id="column1" data-title="1" style="width: 40px;">
     1 
   </div> 
   <div id="column2" data-title="2" style="width: 20px;">
     2 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials