# VTable usage issue: How to manually control the tooltip display

#visactor #vtable

Question title

How to manually control the tooltip display

Problem description

How to manually control the display content, display style, and display timing of tooltips

Solution

VTable provides a showTooltipmethod for manually triggering tooltip display

showTooltip: (col: number, row: number, tooltipOptions?: TooltipOptions) => voild

Col & row: limit the cell position of tooltip
tooltipOptions: Detailed configuration of tooltip:

type TooltipOptions = { /** tooltip content */ content: string; /** tooltip box position has higher priority than referencePosition */ position?: { x: number; y: number }; /** tooltip box reference position. If position is set, this configuration will not take effect */ referencePosition?: { /** reference position is set to a rectangular boundary. Set placement to specify the position at the boundary position */ rect: RectProps; /** specify the position at the boundary position */ placement?: Placement; }; /** custom style needs to specify className dom tooltip to take effect */ className?: string; /** set tooltip style */ style?: { bgColor?: string; fontSize?: number; fontFamily?: string; color?: string; padding?: number[]; arrowMark?: boolean; }; };

Code example

tableInstance.showTooltip(col, row, { content: 'custom tooltip', referencePosition: { rect, placement: VTable.TYPES.Placement.right }, //TODO className: 'defineTooltip', style: { bgColor: 'black', color: 'white', font: 'normal bold normal 14px/1 STKaiti', arrowMark: true, }, });