CODEWITHSUNDEEP
htmlcsstooltip
nkcmr
nkcmr

Reputation: 11000

Creating a tooltip with nothing but css3?

Okay, I know how to do the rest but how to I create the little triangle below:

enter image description here
I had to whip this up in photoshop, and I haven't been able to find any reliable guides. Any ideas would be appreciated.

Upvotes: 0

Views: 540

Answers (2)

ramit
ramit

Reputation: 1

I viewed a tutorial today on TalkersCode and i think this fits perfect with your need here tutorial is the tutorial with demo Create CSS3 Tooltip and the main code is

<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>

.tooltip
{
 display: inline;
 position: relative;
}
.tooltip:hover:after
{
 background: #333;
 background: rgba(0,0,0,.8);
 border-radius: 5px;
 bottom: 26px;
 color: #fff;
 content: attr(title);
 left: 20%;
 padding: 5px 15px;
 position: absolute;
 z-index: 98;
 width: 220px;
}

.tooltip:hover:before
{
 border: solid;
 border-color: #333 transparent;
 border-width: 6px 6px 0 6px;
 bottom: 20px;
 content: "";
 left: 50%;
 position: absolute;
 z-index: 99;
}

Upvotes: 0

Mike Sav
Mike Sav

Reputation: 15291

I have to agree with all the comments above, a simple Google search will provide a solution. I just did a search and look what I found:

http://forrst.com/posts/Pure_css_tooltip_box_with_arrow_T_R_B_L-7kR

http://forrst.com/posts/Simple_pure_CSS_tooltip_with_arrow-BkY

http://cssdeck.com/item/13/pure-css-tooltip-with-arrow

We all want to help but sometimes it feels like we're being asked to do everything. As developers we love to solve problems but with something like this I feel you do have to help yourself (sorry if I come across bitchy)

Upvotes: 3

Related Questions