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 |