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

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

Results show

Complete example: https://www.visactor.io/vtable/demo/component/tooltip

Related Documents

Related api: https://www.visactor.io/vtable/api/Methods#showTooltip

github：https://github.com/VisActor/VTable