< ClearExperience >

Редакция:	13.11.2018
Теги:	HTML + CSS

Подсказки при наведении

Demo

Наведи сюда

HTML

1	<span data-tip="Всплывающая подсказка">Демо</span>

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

[data-tip] {

position: relative;

cursor: help;

padding: 1px 3px 2px;

background: rgba(0, 0, 0, .1);

border-bottom: dotted 1px rgba(0, 0, 0, .8);

}

[data-tip]::before,

[data-tip]::after {

opacity: 0;

visibility: hidden;

position: absolute;

top: 80%;

transition: all 200ms linear;

pointer-events: none;

}

[data-tip]::before {

content: '';

display: block;

width: 0;

height: 0;

left: 50%;

margin: 0 0 0 -5px;

border: solid transparent 5px;

border-bottom-color: rgba(0, 0, 0, .8);

}

[data-tip]::after {

content: attr(data-tip);

display: inline-block;

padding: 3px 6px;

left: 0;

margin: 10px 0 0 0;

color: #fff;

font-size: 13px;

white-space: nowrap;

background: rgba(0, 0, 0, .8);

}

[data-tip]:hover::after,

[data-tip]:hover::before {

opacity: 1;

visibility: visible;

z-index: 2;

top: 100%;

}