Creating a Hint Bubble Tooltip With CSS

Hover the button "See our site" in the sentence below.

You can follow CSS lessons on our website www.btdersleri.com .

You can see another tooltip examples below.

When hovering over an html object, we can make annotation-hint text appear. The text that appears when hovered is called tooltip in English.

We can use it on our site by adjusting the size of the hint bubble, the text and background color, exactly where it will appear, etc., with CSS codes.

The codes of the examples above are located in the Subject Examples section at the bottom of the page.

In the first example, a button is used, and when hovering over it, the tip is shown on the right.

In the second example, when hovering over a text, the hint text is shown below it. 

Examine the codes, change them and see the results by clicking the try it yourself button.

EXERCISES