docs(tooltip): add reactive example, hidden icon example

This commit is contained in:
Eric Liu 2020-12-06 04:51:51 -08:00
commit 5c3c70e249
2 changed files with 35 additions and 0 deletions

View file

@ -20,6 +20,10 @@
</p>
</Tooltip>
### Reactive example
<FileSource src="/framed/Tooltip/TooltipReactive" />
### Directions
<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
@ -60,4 +64,12 @@
<p>
Resources are provisioned based on your account's organization.
</p>
</Tooltip>
### Hidden icon
<Tooltip hideIcon triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
</p>
</Tooltip>

View file

@ -0,0 +1,23 @@
<script>
import { Tooltip, Button } from "carbon-components-svelte";
let open = true;
</script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<Tooltip bind:open triggerText="Resource list" align="start">
<p>Resources are provisioned based on your account's organization.</p>
</Tooltip>
<div style="margin-top: var(--cds-spacing-12);">
<Button size="small" on:click="{() => (open = !open)}">
{open ? 'Close tooltip' : 'Open tooltip'}
</Button>
</div>
<div>Open: {open}</div>