packageDocumentation module import "./Tooltip.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { CommonProps } from "../utils/Props" ; import { Popup } from "../popup/Popup" ; import { RelativePosition } from "@itwin/appui-abstract" ; beta deprecated export type TooltipPlacement = "bottom" | "left" | "right" | "top" ; beta deprecated export interface TooltipProps extends CommonProps { /** Tooltip content. */ children ? : React . ReactNode ; /** Target element of a tooltip. */ target ? : HTMLElement ; /** Allows to control tooltip visibility state. */ visible ? : boolean ; /** Preferred tooltip placement. Defaults to `top`. */ placement ? : TooltipPlacement ; } beta deprecated export function Tooltip ( props ) { const { visible , target , placement } = props ; const [ open , setOpen ] = React . useState ( false ) ; React . useEffect ( ( ) => { const mouseenter = ( ) => { setOpen ( true ) ; } ; const mouseleave = ( ) => { setOpen ( false ) ; } ; visible === undefined && target && target . addEventListener ( "mouseenter" , mouseenter ) ; visible === undefined && target && target . addEventListener ( "mouseleave" , mouseleave ) ; return ( ) => { visible === undefined && target && target . removeEventListener ( "mouseenter" , mouseenter ) ; visible === undefined && target && target . removeEventListener ( "mouseleave" , mouseleave ) ; } ; } , [ visible , target ] ) ; const className = classnames ( "core-tooltip-tooltip" , props . className ) ; return ( < Popup className = { className } isOpen = { props . visible === undefined ? open : props . visible } position = { placementToPosition ( placement ) } showShadow = { false } target = { target } > { props . children } < /Popup>); } internal export function placementToPosition ( placement ) { switch ( placement ) { case "bottom" : return RelativePosition . Bottom ; case "left" : return RelativePosition . Left ; case "right" : return RelativePosition . Right ; case undefined : case "top" : return RelativePosition . Top ; } }