What’s a tooltip?

“Tooltips are labels that appear on hover and focus when the user hovers over an element with the cursor, focuses on an element using a keyboard (usually through the tab key), or upon touch (without releasing) in a touch UI. They contain textual identification for the element in question. They may also contain brief helper text regarding the function of the element. The label itself cannot receive input focus.”

- Google Material Design

Google Hangouts

Twitter

Victor Erixon

Transparent background no border

OR

Opaque background with border

Triangle by border method

Example

Inspired by Gregor Adams’
gradient method

1: Clip away
what we don’t want

2: Create triangle
with linear gradient

See the CodePen

3: Test it across browsers!

Blog post version

The End

Thank you!

(=^◡^=)

Interested in working with DockYard?

@acacheung