Merge pull request #20 from svelte-plugins/add-prop-driven-visibility

refactor(tooltips): add show prop to interface for manual control of showing/hiding
svelte-plugins · Nov 9, 2023 · f307192 · f307192
2 parents cb9068c + 934079a
commit f307192
Show file tree

Hide file tree

Showing 11 changed files with 359 additions and 241 deletions.
diff --git a/README.md b/README.md
@@ -42,14 +42,15 @@ 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`)                     |
+| action       | The action that triggers the tooltip (hover | click | prop)         | `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`)                     |
 | content      | The string or object containing componentref and props              | `string` | `object` component (default: ``)     |
 | maxWidth     | The max allowable width of the tooltip content                      | `number` (default: `200`)                       |
 | position     | The position where the tooltip should appear relative to its parent | `string` (default: `top`)                       |
 | theme        | The CSS theme class name                                            | `string` (default: ``)                          |
+| show         | Allows you to manually control the tooltip visibility               | `boolean` (default: `false`)                    |
 | style        | The object containing theme variable overrides                      | `object` (default: `null`)                      |
 
 #### Using components as content

diff --git a/docs/src/App.svelte b/docs/src/App.svelte
@@ -2,6 +2,8 @@
   import Prism from 'svelte-prismjs';
   import { Tooltip, tooltip } from '@svelte-plugins/tooltips';
 	import ComponentAsContent from './ComponentAsContent.svelte';
+
+  let showTooltip = false;
 </script>
 
 <main>
@@ -54,7 +56,7 @@
   </div>
 
 	<div class="example">
-		<p>This tooltip should appear to the <u use:tooltip={{ content: { component: ComponentAsContent, props: { title: 'Title from props' }}, position: 'left', style: { backgroundColor: 'blue' } }}>left</u> and render the passed component as the tooltip content.</p>
+		<p>This tooltip should appear to the <u use:tooltip={{ content: { component: ComponentAsContent, props: { title: 'Title from props' }}, position: 'left', animation: 'slide', style: { backgroundColor: 'blue' } }}>left</u> and render the passed component as the tooltip content.</p>
     <Prism showLineNumbers={true} code={`
 <script>
   import ComponentAsContent from './ComponentAsContent.svelte';
@@ -86,6 +88,35 @@
 		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 you hover.
 	</div>
 
+  <div class="example">
+		This tooltip should appear <Tooltip content="<b>Tooltip Top</b><p>This is an example of using the 'show' prop.</p>" position="top" animation="slide" bind:show={showTooltip} autoPosition arrow={false} action="prop">on top</Tooltip> when the show button is clicked
+      <button on:click={() => (showTooltip = true)}>Show</button>
+      <button on:click={() => (showTooltip = false)}>Hide</button>
+
+  <Prism showLineNumbers={true} code={`
+
+<script>
+  import { Tooltip } from '@svelte-plugins/tooltips';
+
+  let showTooltip = false;
+</script>
+
+<Tooltip
+  content="<b>Tooltip Top</b><p>This is an example of using the 'show' prop.</p>"
+  position="top"
+  animation="slide"
+  bind:show={showTooltip}
+  autoPosition
+  arrow={false}
+  action="prop">
+  Should show here
+</Tooltip>
+
+<button on:click={() => (showTooltip = true)}>Show</button>
+<button on:click={() => (showTooltip = false)}>Hide</button>
+`} />
+  </div>
+
 	<div class="example">
 		<p>
       This tooltip should appear to the
@@ -94,8 +125,9 @@
         position="right"
         action="click"
         theme="tooltip-theme">
-        <b>right</b> when clicked.
+        <b>right</b>
       </Tooltip>
+      when clicked.
     </p>
     <Prism showLineNumbers={true} code={`
 <Tooltip