Custom Tooltip Components

export const myTooltip = define(MyTooltipComponent, 'MyTooltip')
  .props({
    // Tooltip properties here
  })
  .componentRole('tooltip') // ← This is crucial!
  .build()

npm install antd

type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu'
type TooltipPlacement =
  'top'
  | 'left'
  | 'right'
  | 'bottom'
  | 'topLeft'
  | 'topRight'
  | 'bottomLeft'
  | 'bottomRight'
  | 'leftTop'
  | 'leftBottom'
  | 'rightTop'
  | 'rightBottom'

interface AntTooltipProps extends WrapperProps {
  text: string
  placement: TooltipPlacement
  trigger?: ActionType | ActionType[]
}

const tooltipStyle = {width: '100%', height: '100%'}

const AntTooltip = ({text, placement, trigger, children, ...props}: AntTooltipProps) => {
  if (!children) return null

  return <Tooltip placement={placement} trigger={trigger} title={text}>
    <div style={tooltipStyle} {...props}>{children}</div>
  </Tooltip>
}

export const antTooltip = define(AntTooltip, 'AntTooltip')
  .props({
    text: string.default('Tooltip message...').dataBound,
    children: node,
    placement: oneOf('top'
      , 'left'
      , 'right'
      , 'bottom'
      , 'topLeft'
      , 'topRight'
      , 'bottomLeft'
      , 'bottomRight'
      , 'leftTop'
      , 'leftBottom'
      , 'rightTop'
      , 'rightBottom')
      .default('bottom'),
    trigger: someOf('hover', 'focus', 'click', 'contextMenu')
      .default(['hover'])
  })
  .componentRole('tooltip')
  .build()

npm install @mui/material @emotion/react @emotion/styled

export const muiTooltip = define(Tooltip, 'MuiTooltip')
  .kind('container')
  .props({
    arrow: boolean,
    children: node,
    disableFocusListener: boolean,
    disableInteractive: boolean,
    disableHoverListener: boolean,
    disableTouchListener: boolean,
    followCursor: boolean,
    enterDelay: number,
    leaveDelay: number,
    title: string.default('Tooltip message...').dataBound,
  })
  .componentRole('tooltip')
  .build()

// Create or extend your view
export const customView = baseView

// Add tooltip components to the view
customView.define(antdTooltip.model)
customView.define(muiTooltip.model)