How to make an angled tooltip pointer element using CSS?

Question

I am wondering how to make an angled element that acts as an arrow, attached to a tooltip. I've seen this done by Google Accounts, and I have attached a screenshot. It appears they are achieving this with a couple of span elements.

I can't figure out from their HTML/CSS how they did it... My only idea is to use a CSS3 rotation on a regular div, or an image, but I'm guessing there's a more basic way.

Can anyone give me a hint? I'm not looking for a full solution, I'm just stumped about how to approach it. Also it's not about the tooltip itself, it's about that angled element.

enter image description here

EDIT: Here's a related question. They are using transparent borders, border-radius and box-shadows?

Take a look at Tooltipster source. I think it might have what you are looking for. — Fergus
– Fergus, Commented Mar 31, 2013 at 4:55
Hmm I'm looking at their little pointers... They also use 2 spans for it, but I can't tell from their CSS how it's done! — Tony R
– Tony R, Commented Mar 31, 2013 at 4:58

egig · Accepted Answer · 2013-03-31 05:12:33Z

2

You can create it using image or manipulated span, I know facebook create it using sprite image, google and twitter using styled span, just make border transparent except the bottom one. this is twitter:

enter image description here

this is a tutorial.

edited Mar 31, 2013 at 5:12

answered Mar 31, 2013 at 5:03

egig

4,4405 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make an angled tooltip pointer element using CSS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related