Merge pull request #15 from svelte-plugins/bug-fixes

fix(issues): collection of bug fixes and enhancements

README.md

@@ -42,6 +42,7 @@ Checkout out my <u use:tooltip={{ content: 'Hello World!' }}>tooltip</u>
 ### Props
 | Prop         | Description                                                         | Value                                           |
 | :----------- | :------------------------------------------------------------------ | :---------------------------------------------- |
+| action       | The action that triggers the tooltip (hover | click)                | `string` (default: `hover`)                     |
 | animation    | The animation to apply to the tooltip                               | `string` (default: ``)                          |
 | arrow        | If `false`, the tooltip arrow will not be shown.                    | `boolean` (default: `true`)                     |
 | autoPosition | Adjust tooltip position if viewport clipping occurs                 | `string` (default: `false`)                     |
@@ -75,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);
@@ -87,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

@@ -12,12 +12,12 @@
 
 	<hr />
 
-	<h2>Examples using action</h2>
+ 	<h2>Examples using action</h2>
 
 	<div class="example">
-		<p>This tooltip should appear on the <u title="hello world!" use:tooltip>top</u> and use the content in the <code>title</code> attribute.</p>
+		<p>This tooltip should appear on the <u title="hello world!" action="click"  use:tooltip>top</u> when clicked. The content for the tooltip is provided by the <code>title</code> attribute.</p>
 
-    <Prism code={'<u title="hello world!" use:tooltip>top</u>'} />
+    <Prism code={'<u title="hello world!" action="click" use:tooltip>top</u>'} />
   </div>
 
 	<div class="example">
@@ -27,9 +27,9 @@
   </div>
 
 	<div class="example">
-		<p>This tooltip should appear to the <b use:tooltip={{ content: 'Whoa! I appear to the right.', position: 'right', theme: 'tooltip-theme' }}>right</b>.</p>
+		<p>This tooltip should appear to the <b use:tooltip={{ content: 'Whoa! I appear to the right.', action: 'click', position: 'right', theme: 'tooltip-theme' }}>right</b> when clicked.</p>
 
-    <Prism code={"<b use:tooltip={{ content: 'Whoa! I appear to the right.', position: 'right', theme: 'tooltip-theme' }}>right</b>"} />
+    <Prism code={"<b use:tooltip={{ content: 'Whoa! I appear to the right.', position: 'right', action: 'click', theme: 'tooltip-theme' }}>right</b>"} />
 
     <p>This is also demonstrates the use of the <code>theme</code> property:</p>
 
@@ -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>" position="top" animation="slide" arrow={false}><i>top</i>.</Tooltip>
+		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">
@@ -92,14 +92,16 @@
       <Tooltip
         content="Whoa! I appear to the right."
         position="right"
+        action="click"
         theme="tooltip-theme">
-        <b>right</b>.
+        <b>right</b> when clicked.
       </Tooltip>
     </p>
     <Prism showLineNumbers={true} code={`
 <Tooltip
   content="Whoa! I appear to the right."
   position="right"
+  action="click"
   theme="tooltip-theme">
   <b>right</b>
 </Tooltip>