diff --git a/dist/infotip/infotip.css b/dist/infotip/infotip.css index 10a6f07d0..cd6d67684 100644 --- a/dist/infotip/infotip.css +++ b/dist/infotip/infotip.css @@ -11,7 +11,10 @@ span.infotip { border-radius: var(--bubble-border-radius, var(--border-radius-50)); filter: var(--bubble-filter); font-size: 14px; + left: 0; max-width: 344px; + position: absolute; + top: 0; transform: scale3d(1, 1, 1); width: -webkit-max-content; width: max-content; @@ -19,9 +22,6 @@ span.infotip { background-color: var(--infotip-background-color, var(--color-background-primary)); color: var(--infotip-foreground-color, var(--color-foreground-primary)); display: none; - left: -6px; - margin-top: var(--spacing-200); - position: absolute; } .infotip__mask { border-radius: var(--bubble-border-radius, var(--border-radius-50)); @@ -54,8 +54,6 @@ span.infotip__mask { transform: rotate(45deg); width: 8px; z-index: 0; - top: -4px; - left: calc(50% - 4px); } .infotip__pointer--top-left { top: -4px; diff --git a/dist/tooltip/tooltip.css b/dist/tooltip/tooltip.css index aa2c11456..94a0780b4 100644 --- a/dist/tooltip/tooltip.css +++ b/dist/tooltip/tooltip.css @@ -9,17 +9,17 @@ span.tooltip { } .tooltip__overlay { border-radius: var(--bubble-border-radius, var(--border-radius-50)); + display: none; filter: var(--bubble-filter); font-size: 14px; + left: 0; max-width: 344px; + position: absolute; + top: 0; transform: scale3d(1, 1, 1); width: -webkit-max-content; width: max-content; z-index: 1; - display: none; - left: -10px; - margin-top: var(--spacing-200); - position: absolute; } .tooltip__mask { border-radius: var(--bubble-border-radius, var(--border-radius-50)); @@ -68,8 +68,6 @@ button.tooltip__close { transform: rotate(45deg); width: 8px; z-index: 0; - top: -4px; - left: calc(50% - 4px); background-color: var(--tooltip-background-color, var(--color-background-primary)); } .tooltip__pointer--top-left { diff --git a/dist/tourtip/tourtip.css b/dist/tourtip/tourtip.css index 0283edf2d..73bd8a991 100644 --- a/dist/tourtip/tourtip.css +++ b/dist/tourtip/tourtip.css @@ -9,15 +9,17 @@ span.tourtip { } .tourtip__overlay { border-radius: var(--bubble-border-radius, var(--border-radius-100)); + display: none; filter: var(--bubble-filter); font-size: 14px; + left: 0; max-width: 344px; + position: absolute; + top: 0; transform: scale3d(1, 1, 1); width: -webkit-max-content; width: max-content; z-index: 1; - display: none; - position: absolute; } .tourtip__mask { border-radius: var(--bubble-border-radius, var(--border-radius-100)); @@ -73,8 +75,6 @@ button.tourtip__close > svg { transform: rotate(45deg); width: 8px; z-index: 0; - top: -4px; - left: calc(50% - 4px); background-color: var(--tourtip-background-color, var(--color-background-primary)); } .tourtip__pointer--top-left { diff --git a/docs/_includes/infotip.html b/docs/_includes/infotip.html index 4e79269a8..69a69c108 100644 --- a/docs/_includes/infotip.html +++ b/docs/_includes/infotip.html @@ -7,13 +7,70 @@
+ +
+ +
+
+ +

Infotip

+

Here's a tip to help you be successful at your task.

+
+ +
+
+
+
+
+
+ {% highlight html %} + + +
+ +
+
+ +

Infotip

+

Here's a tip to help you be successful at your task.

+
+ +
+
+
+
+ {% endhighlight %} + + +

By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.

+

In order to get this to work with floating-ui, you need to remove pointer position infotip__pointer--top-left and remove any style positioning

+ +
+
+
- +
@@ -39,7 +96,7 @@

Infotip

- +
@@ -63,14 +120,14 @@

Infotip

Inside paragraph - + - + @@ -99,7 +156,7 @@

Infotip

- + diff --git a/docs/_includes/tooltip.html b/docs/_includes/tooltip.html index e5c3fca31..c4f8d025d 100644 --- a/docs/_includes/tooltip.html +++ b/docs/_includes/tooltip.html @@ -13,8 +13,8 @@ {% include symbol.html name="settings-24" %} -