@forter/tooltip

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