DEV Community

Ray
Ray

Posted on

# 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
Enter fullscreen mode Exit fullscreen mode
  • 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;
};
};
Enter fullscreen mode Exit fullscreen mode

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,
    },
});
Enter fullscreen mode Exit fullscreen mode

Results show

Image description

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay