add monochrome color tooltip, clarified tooltip behavior in docs

Author: RATIU5

docs/src/content/docs/docs/components/tooltip.mdx

@@ -13,6 +13,10 @@ import { Tooltip } from "studiocms:ui/components";
 
 A tooltip component that will show on hover (desktop) or tap (mobile). It's used to provide additional information about an element.
 
+:::note[Note]
+Only one tooltip can be open at a time. If you open another tooltip, the previous one will close.
+:::
+
 ## Usage
 
 <Tabs>
@@ -109,6 +113,8 @@ The values for the position prop are:
 
 The tooltip can be set to be open by default. This is useful for debugging or when you want the tooltip to be visible without user interaction.
 
+Keep in mind, if a user interacts with another tooltip, the `defaultOpen` tooltip will close, even if it was not in view.
+
 :::note[Note]
 The `defaultOpen` prop can only be used on one tooltip at a time per page. If you set it on multiple tooltips, only the last one will be open by default.
 :::
@@ -174,6 +180,10 @@ The tooltip can be styled with different colors. The default is `default`. The a
         <button>Info</button>
         <Fragment slot="tooltip">This is an info tooltip.</Fragment>
       </Tooltip>
+      <Tooltip color="mono">
+        <button>Monochrome</button>
+        <Fragment slot="tooltip">This is an monochrome tooltip.</Fragment>
+      </Tooltip>
     </PreviewCard>
   </TabItem>
   <TabItem label="Code">
@@ -206,6 +216,10 @@ The tooltip can be styled with different colors. The default is `default`. The a
       <button>Info</button>
       <Fragment slot="tooltip">This is an info tooltip.</Fragment>
     </Tooltip>
+    <Tooltip color="mono">
+      <button>Monochrome</button>
+      <Fragment slot="tooltip">This is an monochrome tooltip.</Fragment>
+    </Tooltip>
     ```
   </TabItem>
 </Tabs>

packages/studiocms_ui/src/components/Tooltip/Tooltip.astro

@@ -32,7 +32,7 @@ interface Props extends Omit<HTMLAttributes<"div">, "class:list"> {
   /**
    * The color of the tooltip. Defaults to 'default'.
    */
-  color?: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+  color?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "mono";
 
   /**
    * The gap between the tooltip and the anchor element in pixels. Defaults to 8.

packages/studiocms_ui/src/components/Tooltip/tooltip.css

@@ -57,6 +57,11 @@
   color: var(--text-light);
   border-color: var(--info-hover);
 }
+.sui-tooltip-popup.color-mono {
+  background-color: var(--mono-base);
+  color: var(--text-inverted);
+  border-color: var(--mono-hover);
+}
 .sui-tooltip-popup.color-default.variant-outlined {
   border-color: var(--text-muted);
   background-color: var(--default-base);
@@ -81,6 +86,10 @@
   border-color: var(--info-hover);
   background-color: var(--default-base);
 }
+.sui-tooltip-popup.color-mono.variant-outlined {
+  border-color: var(--mono-hover);
+  background-color: var(--default-base);
+}
 .sui-tooltip-popup.animate {
   transition: opacity 0.2s ease-out, visibility 0.2s;
 }
@@ -122,6 +131,10 @@
   background-color: var(--info-base);
   border-color: var(--info-hover);
 }
+.sui-tooltip-popup.color-mono .sui-tooltip-pointer {
+  background-color: var(--mono-base);
+  border-color: var(--mono-hover);
+}
 .sui-tooltip-popup.color-default.variant-outlined .sui-tooltip-pointer {
   border-color: var(--text-muted);
   background-color: var(--default-base);
@@ -145,6 +158,10 @@
   border-color: var(--info-hover);
   background-color: var(--default-base);
 }
+.sui-tooltip-popup.color-mono.variant-outlined .sui-tooltip-pointer {
+  border-color: var(--mono-hover);
+  background-color: var(--default-base);
+}
 .sui-tooltip-popup.top .sui-tooltip-pointer {
   bottom: -9px;
   transform: rotateZ(45deg);