fixTooltip

This commit is contained in:
2021-08-14 15:10:07 +03:00
parent a66ccba187
commit 2791acedda
+16 -12
View File
@@ -81,19 +81,23 @@
border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width); border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
} }
/*right*/ /*right*/
.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"] { .kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"], .kit-tooltip-end {
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)); padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
} }
.kit-tooltip-right .tooltip-arrow, .kit-tooltip-auto[x-placement^="right"] .tooltip-arrow { .kit-tooltip-right .arrow,
.kit-tooltip-auto[x-placement^="right"] .arrow,
.kit-tooltip-end .tooltip-arrow {
left: 0; left: 0;
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2)); width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2)); height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
top: 50% !important; top: 50% !important;
transform: translate(0px, -50%); transform: translate(0px, -50%) !important;
} }
.kit-tooltip-right .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="right"] .tooltip-arrow::before { .kit-tooltip-right .arrow::before,
.kit-tooltip-auto[x-placement^="right"] .arrow::before,
.kit-tooltip-end .tooltip-arrow::before {
left: 0px; left: 0px;
top: 50%; top: 50%;
transform: rotate( transform: rotate(
@@ -110,7 +114,7 @@
padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0; padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
} }
.kit-tooltip-bottom .tooltip-arrow, .kit-tooltip-auto[x-placement^="bottom"] .tooltip-arrow { .kit-tooltip-bottom .tooltip-arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
top: 0; top: 0;
width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2)); width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2)); height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
@@ -118,7 +122,7 @@
/*transform: translate(-50%, 0);*/ /*transform: translate(-50%, 0);*/
} }
.kit-tooltip-bottom .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before { .kit-tooltip-bottom .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
top: 0; top: 0;
left: 50%; left: 50%;
transform: rotate( transform: rotate(
@@ -135,12 +139,12 @@
/*left*/ /*left*/
.kit-tooltip-left, .kit-tooltip-left,
.kit-tooltip-auto[x-placement^="left"], .kit-tooltip-auto[x-placement^="left"],
.kit-tooltip-start[data-popper-placement^="left"] { .kit-tooltip-start {
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)); padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
} }
.kit-tooltip-left .tooltip-arrow, .kit-tooltip-auto[x-placement^="left"] .tooltip-arrow, .kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow,
.kit-tooltip-start[data-popper-placement^="left"] .tooltip-arrow { .kit-tooltip-start .tooltip-arrow {
right: 0; right: 0;
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2)); width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2)); height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
@@ -148,9 +152,9 @@
transform: translate(0px, -50%) !important; transform: translate(0px, -50%) !important;
} }
.kit-tooltip-left .tooltip-arrow::before, .kit-tooltip-left .arrow::before,
.kit-tooltip-auto[x-placement^="left"] .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="left"] .arrow::before,
.kit-tooltip-start[data-popper-placement^="left"] .tooltip-arrow::before { .kit-tooltip-start .tooltip-arrow::before {
right: 0; right: 0;
top: 50%; top: 50%;
transform: rotate( transform: rotate(