RayQuestion 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
