Tooltip
A simple text popup tip.
Setup
Import the Tooltip component in a script tag.
Demonstrate
Svelte Copy
import { Tooltip } from "@mgisolutions/design-system/svelte";
basic usage
The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
Demonstrate
Svelte Copy
<Tooltip content="Show basic Tooltip">
<Button type="ghost">Basic</Button>
</Tooltip>
placement
There are 8 placement options available.
Demonstrate
Placements
Svelte Copy
<Tooltip content="Show placement Tooltip" placement="top-center">
<Button type="ghost">placement</Button>
</Tooltip>
color
We preset a series of colorful Tooltip styles for use in different situations.
Demonstrate
Svelte Copy
<Tooltip content="Show color Tooltip" color="#3858DB">
<Button type="ghost">placement</Button>
</Tooltip>
default open
Whether the floating tooltip card is open by default
Demonstrate
Show defaultOpen Tooltip
Svelte Copy
<Tooltip content="Show color Tooltip" tooltipVisible>
<Button type="ghost">placement</Button>
</Tooltip>
Component Data
- props
- slot
| Name | Description | Type | Default |
|---|---|---|---|
| content | Content of tooltip when it show | string | empty |
| zIndex | Set style z-index of Tooltip | number | 10 |
| tooltipVisible | Whether the floating tooltip card is open by default | boolean | false |
| autoPosition | Responsive when mobile desktop | boolean | false |
| className | Class of Tooltip component | string | empty |
| color | Set background color for Tooltip | boolean | #222325 |
| placement | Chose postion for Tooltip | "top-center" | "top-start" | "top-end" | "bottom-center" | "bottom-start" | "bottom-end" | "right" | "left" | top-center |