4d147e3eb7
* Add popover component * [WIP] Popover component * update ref * conversation resolve * conversation resolve (conditional render icon) * conversation resolve (onMount instead createEffect)
44 lines
672 B
SCSS
44 lines
672 B
SCSS
.tooltip {
|
|
padding: 8px;
|
|
background: #141414;
|
|
font-size: 1.2rem;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
z-index: 100;
|
|
|
|
.arrow,
|
|
.arrow::before {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: inherit;
|
|
}
|
|
|
|
.arrow {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.arrow::before {
|
|
visibility: visible;
|
|
content: '';
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
&[data-popper-placement^='top'] > .arrow {
|
|
bottom: -4px;
|
|
}
|
|
|
|
&[data-popper-placement^='bottom'] > .arrow {
|
|
top: -4px;
|
|
}
|
|
|
|
&[data-popper-placement^='left'] > .arrow {
|
|
right: -4px;
|
|
}
|
|
|
|
&[data-popper-placement^='right'] > .arrow {
|
|
left: -4px;
|
|
}
|
|
}
|