Motyar

Freelance Web Developer

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;
   positionabsolute;
   margin-top:-105px;
   margin-left:-133px;
  }

a:hover div{
  display:block;
}

.tip {
  positionrelative;
  width360px;
  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-top12px solid #000;
  border-right12px solid transparent; 
  border-left12px solid transparent
  positionabsolute;
  bottom: -12px;
  left50%;
  margin0 0 0 -12px;
  width0; 
  height0; 
} 

HTML

 <a href="http://motyar.blogspot.com" >Motyar blog
 <div class="tip">
 <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: ,


By :