FilesExpand file tree

main

/

_tooltip.scss

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

98 lines (85 loc) · 2.56 KB

main

/

_tooltip.scss

Copy path

Top

File metadata and controls

• Code
• Blame

98 lines (85 loc) · 2.56 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

//@see https://github.com/chinchang/hint.css

@use "mixins";

@use "vars";

$fontSize: 12px;

$verticalPadding: 8px;

$horizontalPadding: 10px;

// default tooltip height

$tooltipHeight: $fontSize + 2 * $verticalPadding !default;

// border-width for tooltip arrow

$arrowBorderWidth: 6px !default;

// horizontal arrow offset

$arrowOffsetX: 3 * $arrowBorderWidth !default;

// text-shadow darken percentage

$textShadowDarkenAmount: 25% !default;

// transition distance

$transitionDistance: 8px !default;

// Various colors

// Default color is blackish

$defaultColor: #69738a !default;

// Error color

$errorColor: hsl(1, 40%, 50%) !default;

// Warning color

$warningColor: hsl(38, 46%, 54%) !default;

// Info Color

$infoColor: hsl(200, 50%, 45%) !default;

// Success Color

$successColor: hsl(121, 32%, 40%) !default;

@mixin styles {

[data-title] {

&:before, &:after {

position: absolute;

@include mixins.vendor('transform', translate3d(0, 0, 0));

display: none;

opacity: 0;

z-index: vars.$zIndex;

pointer-events: none;

// @include vendor('transition', opacity 0.3s ease 0);

// @include vendor('transition-delay', 0);

top: 110%;

right: 50%;

}

&:hover:before, &:hover:after {

display: block;

opacity: 1;

}

// Top arrow

&:before {

content: '';

position: absolute;

background: transparent;

border: $arrowBorderWidth solid transparent;

z-index: vars.$zIndex + 1;

margin-top: -2 * $arrowBorderWidth;

border-bottom-color: $defaultColor;

margin-right: -1 * $arrowBorderWidth;

}

/**

* tooltip body

*/

&:after {

content: attr(data-title); // The magic!

background: $defaultColor;

color: white;

padding: $verticalPadding $horizontalPadding;

font-size: $fontSize;

line-height: $fontSize; // Vertical centering.

white-space: nowrap; // Prevent breaking to new line.

margin-right: -1 * $arrowOffsetX;

border-radius: 2px;

}

}

.vertical [data-title] {

&:before, &:after {

top: 0%;

right: 200%;

}

// Right arrow

&:before {

border: $arrowBorderWidth solid transparent;

border-left-color: $defaultColor;

margin-top: $verticalPadding;

margin-right: -1 * ($arrowOffsetX + 2 * $arrowBorderWidth);

}

}

}