Creating a tooltip with nothing but css3?

Question

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.

I think you're not new in here, so, please, post what have you tried so far. A simple search on Google could give you the answer. We help, don't work for free. — Ricardo Souza, Jun 10 '12 at 17:02
probable duplicate of http://stackoverflow.com/questions/5623072/how-can-i-create-a-tooltip-tail-using-pure-css — BoltClock, Jun 10 '12 at 17:03
@BoltClock I've edited to make it clear on the meaning: please. ;) — Ricardo Souza, Jun 10 '12 at 17:05
I really actually don't know where to start. And I only want to use CSS because dealing with sprites n such is difficult IMO. — nkcmr, Jun 10 '12 at 17:12

Mike Sav · Accepted Answer · 2012-06-10T17:34:00.437

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)

score 0 · Answer 2 · answered Jun 08 '16 at 07:26

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;
}

Creating a tooltip with nothing but css3?

2 Answers2