# 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,
    },
});