|
|
@@ -49,7 +49,7 @@
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * A class once applied displays the tooltip south of the element.
|
|
|
+ * A class that displays the tooltip south of the element.
|
|
|
*
|
|
|
* [element]
|
|
|
* ^
|
|
|
@@ -57,12 +57,14 @@
|
|
|
* | Tooltip |
|
|
|
* +-----------+
|
|
|
*/
|
|
|
- &.ck-tooltip_s {
|
|
|
+ &.ck-tooltip_s,
|
|
|
+ &.ck-tooltip_sw {
|
|
|
bottom: calc(-1 * var(--ck-tooltip-arrow-size));
|
|
|
transform: translateY( 100% );
|
|
|
|
|
|
& .ck-tooltip__text::after {
|
|
|
- top: calc(-1 * var(--ck-tooltip-arrow-size));
|
|
|
+ /* 1px addresses gliches in rendering causing gap between the triangle and the text */
|
|
|
+ top: calc(-1 * var(--ck-tooltip-arrow-size) + 1px);
|
|
|
transform: translateX( -50% );
|
|
|
border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
|
|
|
border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
|
|
|
@@ -70,7 +72,32 @@
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * A class once applied displays the tooltip north of the element.
|
|
|
+ * A class that displays the tooltip south-west of the element.
|
|
|
+ *
|
|
|
+ * [element]
|
|
|
+ * ^
|
|
|
+ * +-----------+
|
|
|
+ * | Tooltip |
|
|
|
+ * +-----------+
|
|
|
+ */
|
|
|
+
|
|
|
+ &.ck-tooltip_sw {
|
|
|
+ right: 50%;
|
|
|
+ left: auto;
|
|
|
+
|
|
|
+ & .ck-tooltip__text {
|
|
|
+ left: auto;
|
|
|
+ right: calc( -2 * var(--ck-tooltip-arrow-size));
|
|
|
+ }
|
|
|
+
|
|
|
+ & .ck-tooltip__text::after {
|
|
|
+ left: auto;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * A class that displays the tooltip north of the element.
|
|
|
*
|
|
|
* +-----------+
|
|
|
* | Tooltip |
|