Simple tooltip on hover

Ask us anything How do I?
1

I have created a component with an icon inside.
Now, I want to have a basic tooltip or text message on top of that icon, when I hover the image.

My question is more on what settings to chose to make that text appear on top of the icon, without moving anything on my screen ?

2

Use position: absolute on the container/div holding the tooltip text. :smile:

3

right, perfect, thanks.
works well

4

You can also have a standard tooltip using html attributes → title → the write out the tool tip> not as good looking as a custom one though.

image
image390×328 8.69 KB

1 Like
5

Very nice @Yaj ! :ok_hand: :v: Thanks for the tips.
I didn’t know that.

Super quick and handy

1 Like
6

I’ve found the Dropdown from the basic elements to be one of the easiest and most elegant approaches to tooltips.

You can define what the trigger is, in your case it would be an icon, and what the contents of the dropdown are.

image
image790×448 6.61 KB

Then you can configure the trigger event, where you want the dropdown to appear (WeWeb if you’re reading this it would be nice to be able to map this so I can determine if the dropdown will appear off screen and change the position to left, right, bottom), and if you want it animated.

image
image716×800 39.3 KB

I assigned a class to my content div named tooltip so I could add custom CSS to give it that classic caret.

image
image710×582 20 KB

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: rgba(0,0,0, 0.8) transparent transparent transparent;
}

The outcome is as follows…

** It’s worth noting that the title text workaround is frowned upon from an accessibility perspective.