@forter/tooltip
v2.4.0
Published
Tooltip from Forter Components
Downloads
13
Readme
fc-tooltip
a small popping label upon hovering.
Usage
<script>
import '@forter/tooltip';
</script>
<fc-tooltip>
<fc-button intent="primary">Peeka...</fc-button>
</fc-tooltip>
Examples
<!-- invalid -->
<fc-tooltip position="invalid">
<fc-button intent="primary">Peeka...</fc-button>
</fc-tooltip>
Properties
| Property | Attribute | Type | Default | Description |
|------------|-----------|------------------------------------------|----------------|--------------------------------------------------|
| position
| | "top" \| "left" \| "bottom" \| "right"
| | |
| showing
| showing
| boolean
| false | Whether tooltip is shown. |
| tooltip
| tooltip
| string
| "Placeholder!" | the tooltip text. example: Can be long explaination
|
Events
| Event | Description |
|----------|--------------------------------------------------|
| opened
| when tooltip is showed. method: toggle
, example: { "showing": true }
|
Slots
| Name | Description |
|------|--------------------------------------------------|
| | tooltip element. example: <fc-button intent="apply">Peeka...</fc-button>
|
CSS Custom Properties
| Property | Description |
|---------------------------------|----------------------------------------------|
| --fc-tooltip-background-color
| tooltip background color. default: #212529
|
| --fc-tooltip-width
| tooltip width. default: max-content
|