mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
e00c956a66
Refactor `Tooltip` to use `Popover` component internally. **Breaking changes** - `direction` is replaced by additional `align` options. - `hideIcon` property is removed. **Limitations** - The reference implementaiton uses the trigger content instead of the tooltip content as primary slot. This is not considered in this refactoring since it would be too big of a change. - Instead of `TooltipFooter` a new `Toggletip` component would be required which is not included in this patch.
46 lines
1.1 KiB
Svelte
46 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { Tooltip, Link, Button } from "../types";
|
|
import Catalog from "carbon-icons-svelte/lib/Catalog.svelte";
|
|
|
|
let open = true;
|
|
</script>
|
|
|
|
<Tooltip bind:open on:open on:close>
|
|
Resources are provisioned based on your account's organization.
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
Resources are provisioned based on your account's organization.
|
|
</Tooltip>
|
|
|
|
<Tooltip triggerText="Top" align="top">Top</Tooltip>
|
|
|
|
<Tooltip triggerText="Right" align="right">Right</Tooltip>
|
|
|
|
<Tooltip triggerText="Bottom" align="bottom">Bottom</Tooltip>
|
|
|
|
<Tooltip triggerText="Left" align="left">Left</Tooltip>
|
|
|
|
<Tooltip>
|
|
Resources are provisioned based on your account's organization.
|
|
<div class="bx--tooltip__footer">
|
|
<Link href="/">Learn more</Link>
|
|
<Button size="sm">Manage</Button>
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Link href="/">Learn more</Link>
|
|
|
|
<Button size="sm">Manage</Button>
|
|
|
|
<Tooltip icon="{Catalog}">
|
|
Resources are provisioned based on your account's organization.
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<div
|
|
slot="icon"
|
|
style="width: 1rem; height: 1rem; outline: 1px solid red;"
|
|
></div>
|
|
Resources are provisioned based on your account's organization.
|
|
</Tooltip>
|