123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- .tooltip {
- position: absolute;
- display: block;
- font-family: var(--font-face);
- font-style: normal;
- font-weight: normal;
- letter-spacing: normal;
- line-break: auto;
- line-height: 1.6;
- text-align: left;
- text-align: start;
- text-decoration: none;
- text-shadow: none;
- text-transform: none;
- white-space: normal;
- word-break: normal;
- word-spacing: normal;
- word-wrap: normal;
- overflow-wrap: anywhere;
- font-size: 12px;
- opacity: 0;
- z-index: 100000;
-
- margin-top: -3px;
- padding: 10px 0;
- filter: drop-shadow(0 1px 10px var(--color-box-shadow));
- &.in,
- &.show,
- &.tooltip[aria-hidden='false'] {
- visibility: visible;
- opacity: 1;
- transition: opacity .15s;
- }
- &.top .tooltip-arrow,
- &[x-placement^='top'] {
- left: 50%;
- margin-left: -10px;
- }
- &.bottom,
- &[x-placement^='bottom'] {
- margin-top: 3px;
- padding: 10px 0;
- }
- &.right,
- &[x-placement^='right'] {
- margin-left: 3px;
- padding: 0 10px;
- .tooltip-arrow {
- top: 50%;
- left: 0;
- margin-top: -10px;
- border-width: 10px 10px 10px 0;
- border-right-color: var(--color-main-background);
- }
- }
- &.left,
- &[x-placement^='left'] {
- margin-left: -3px;
- padding: 0 5px;
- .tooltip-arrow {
- top: 50%;
- right: 0;
- margin-top: -10px;
- border-width: 10px 0 10px 10px;
- border-left-color: var(--color-main-background);
- }
- }
-
- &.top,
- &.top-left,
- &[x-placement^='top'],
- &.top-right {
- .tooltip-arrow, .arrow {
- bottom: 0;
- border-width: 10px 10px 0;
- border-top-color: var(--color-main-background);
- }
- }
- &.top-left .tooltip-arrow {
- right: 10px;
- margin-bottom: -10px;
- }
- &.top-right .tooltip-arrow {
- left: 10px;
- margin-bottom: -10px;
- }
-
- &.bottom,
- &[x-placement^='bottom'],
- &.bottom-left,
- &.bottom-right {
- .tooltip-arrow, .arrow {
- top: 0;
- border-width: 0 10px 10px;
- border-bottom-color: var(--color-main-background);
- }
- }
- &[x-placement^='bottom'] .tooltip-arrow,
- &.bottom .tooltip-arrow {
- left: 50%;
- margin-left: -10px;
- }
- &.bottom-left .tooltip-arrow {
- right: 10px;
- margin-top: -10px;
- }
- &.bottom-right .tooltip-arrow {
- left: 10px;
- margin-top: -10px;
- }
- }
- .tooltip-inner {
- max-width: 350px;
- padding: 5px 8px;
- background-color: var(--color-main-background);
- color: var(--color-main-text);
- text-align: center;
- border-radius: var(--border-radius);
- }
- .tooltip-arrow, .tooltip .arrow {
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- }
|