Mar 16, 2010

Twitter like tooltip with css

-->




i want to share the twitter like tooltip design, that i have created with css

Code

CSS

 a{
   text-decoration:none;
  }

 a div{
   display:none;
   position: absolute;
   margin-top:-105px;
   margin-left:-133px;
  }

a:hover div{
  display:block;
}

.tip {
  position: relative;
  width: 360px;
  opacity:0.8;
  filter:alpha(opacity=80);
}



.tip .body {
  color: #ffffff;
  background-color: #000;
  padding:2px 5px 2px 5px;
  border-radius:5px; 
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}

.tip .tail {
  border-top: 12px solid #000;
  border-right: 12px solid transparent; 
  border-left: 12px solid transparent; 

  position: absolute;
  bottom: -12px;
  left: 50%;
  margin: 0 0 0 -12px;
  width: 0; 
  height: 0; 
} 

HTML

 <a href="http://motyar.blogspot.com" >Motyar blog

 <div class="tip">
 <p class="body">Motyar blog is a Programmer's Blog that covers Twitter,Twitter apps, jQuery,jQuery draw, AJAX, PHP, CSS, Javascript, Usability, Accessibility, Optimization.</p>
 <div class="tail"></div>
 </div>
 </a>

 

Demo

-->

To view this code working go to this link
and hover the shown link to see the effect.

Labels: css, twitter

By : Motyar+ @motyar