Skip to content

Commit bf17305

Browse files
committed
refactor(demo): add example using prop to show/hide tooltip
1 parent 5054b90 commit bf17305

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

docs/src/App.svelte

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import Prism from 'svelte-prismjs';
33
import { Tooltip, tooltip } from '@svelte-plugins/tooltips';
44
import ComponentAsContent from './ComponentAsContent.svelte';
5+
6+
let showTooltip = false;
57
</script>
68

79
<main>
@@ -54,7 +56,7 @@
5456
</div>
5557

5658
<div class="example">
57-
<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>
59+
<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>
5860
<Prism showLineNumbers={true} code={`
5961
<script>
6062
import ComponentAsContent from './ComponentAsContent.svelte';
@@ -86,6 +88,12 @@
8688
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.
8789
</div>
8890

91+
<div class="example">
92+
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}>on top</Tooltip> when the show button is clicked
93+
<button on:click={() => (showTooltip = true)}>Show</button>
94+
<button on:click={() => (showTooltip = false)}>Hide</button>
95+
</div>
96+
8997
<div class="example">
9098
<p>
9199
This tooltip should appear to the
@@ -94,8 +102,9 @@
94102
position="right"
95103
action="click"
96104
theme="tooltip-theme">
97-
<b>right</b> when clicked.
105+
<b>right</b>
98106
</Tooltip>
107+
when clicked.
99108
</p>
100109
<Prism showLineNumbers={true} code={`
101110
<Tooltip

0 commit comments

Comments
 (0)