css

Description

Adds a custom CSS class to the Tooltip

Usage

css?: string;

Details

The css class is applied to the tooltip. Use it to override CSS variables and customize the tooltip appearance:

Variable	Default
--wx-tooltip-font	var(--wx-font-weight) var(--wx-font-size) var(--wx-font-family)
--wx-tooltip-font-color	#ffffff
--wx-tooltip-background	#2c2f3c
--wx-tooltip-border	transparent
--wx-tooltip-padding	4px 8px
--wx-tooltip-point-offset	14px
--wx-tooltip-arrow-size	6px
--wx-tooltip-z-index	1002

Example

<Tooltip css="my-tooltip">
  <div data-tooltip-text="Styled tooltip">Hover</div>
</Tooltip>

<style>
  :global(.my-tooltip) {
    --wx-tooltip-background: white;
    --wx-tooltip-font-color: black;
    --wx-tooltip-padding: 8px 12px;
    --wx-border-radius: 8px;
  }
</style>

Related article: Styling a tooltip