refactor(styles): add white-scape css variables for more control

Author: dysfunc

README.md

@@ -76,6 +76,7 @@ You can customize tooltips theme using several methods:
 Tooltip CSS variables:
 
 ```css
+--tooltip-arrow-size: 10px;
 --tooltip-background-color: rgba(0, 0, 0, 0.9);
 --tooltip-border-radius: 4px;
 --tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
@@ -88,8 +89,9 @@ Tooltip CSS variables:
 --tooltip-offset-x: 12px;
 --tooltip-offset-y: 12px;
 --tooltip-padding: 12px;
+--tooltip-white-space-hidden: nowrap;
+--tooltip-white-space-shown: normal;
 --tooltip-z-index: 100;
---tooltip-arrow-size: 10px;
 ```
 
 ### Using the theme property

docs/src/App.svelte

@@ -83,7 +83,7 @@
 	</div>
 
 	<div class="example">
-		This tooltip should appear on the <Tooltip content="<b>Tooltip Top</b><p>This is an example of using HTML and content wrapping.</p>" action="click" position="top" animation="slide" arrow={false}><i>top</i></Tooltip> when clicked.
+		This tooltip should appear on the <Tooltip content="<b>Tooltip Top</b><p>This is an example of using HTML and content wrapping.</p>" position="top" animation="slide" arrow={false}><i>top</i></Tooltip> when I hover.
 	</div>
 
 	<div class="example">
@@ -94,7 +94,7 @@
         position="right"
         action="click"
         theme="tooltip-theme">
-        <b>right</b>.
+        <b>right</b> when clicked.
       </Tooltip>
     </p>
     <Prism showLineNumbers={true} code={`

src/action-tooltip.svelte

@@ -79,6 +79,7 @@
    *--------------------------*/
 
   :root {
+    --tooltip-arrow-size: 10px;
     --tooltip-background-color: rgba(0, 0, 0, 0.9);
     --tooltip-border-radius: 4px;
     --tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
@@ -91,8 +92,9 @@
     --tooltip-offset-x: 12px;
     --tooltip-offset-y: 12px;
     --tooltip-padding: 12px;
+    --tooltip-white-space-hidden: nowrap;
+    --tooltip-white-space-shown: normal;
     --tooltip-z-index: 100;
-    --tooltip-arrow-size: 10px;
   }
 
   /*--------------------------*
@@ -114,14 +116,14 @@
     position: absolute;
     text-align: left;
     visibility: hidden;
-    white-space: nowrap;
+    white-space: var(--tooltip-white-space-hidden);
     z-index: var(--tooltip-z-index);
   }
 
   .tooltip.show {
     opacity: 1;
     visibility: visible;
-    white-space: normal;
+    white-space: var(--tooltip-white-space-shown);
   }
 
   .tooltip.bottom:after,

src/tooltip.svelte

@@ -164,6 +164,7 @@
    *--------------------------*/
 
   :root {
+    --tooltip-arrow-size: 10px;
     --tooltip-background-color: rgba(0, 0, 0, 0.9);
     --tooltip-border-radius: 4px;
     --tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
@@ -176,8 +177,9 @@
     --tooltip-offset-x: 0px;
     --tooltip-offset-y: 0px;
     --tooltip-padding: 12px;
+    --tooltip-white-space-hidden: nowrap;
+    --tooltip-white-space-shown: normal;
     --tooltip-z-index: 100;
-    --tooltip-arrow-size: 10px;
   }
 
   /*--------------------------*
@@ -203,14 +205,14 @@
     position: absolute;
     text-align: left;
     visibility: hidden;
-    white-space: nowrap;
+    white-space: var(--tooltip-white-space-hidden);
     z-index: var(--tooltip-z-index);
   }
 
   .tooltip.show {
     opacity: 1;
     visibility: visible;
-    white-space: normal;
+    white-space: var(--tooltip-white-space-shown);
   }
 
   .tooltip.bottom:after,