@material-ui/core#Tooltip TypeScript Examples

function GitHubGistWidget(props: WidgetArgs) {
  const classes = useStyles(props);
  const { t } = useTranslation();
  const [url, setURL] = useState<string>("");

  const setGistURL = useCallback(
    (url: string) => {
      try {
        const location = new URL(url);
        if (location.host !== "gist.github.com") {
          return;
        } else {
          props.setAttributes({
            url: location.origin + location.pathname,
          });
        }
      } catch (error) {}
    },
    [props]
  );

  if (props.attributes["url"]) {
    return (
      <Box className={"preview github-gist"} style={{ whiteSpace: "normal" }}>
        <Gist url={props.attributes["url"]}></Gist>
        {!props.isPreview && (
          <Box className={clsx(classes.actionButtonsGroup)}>
            <IconButton onClick={() => props.removeSelf()}>
              <TrashCanOutline></TrashCanOutline>
            </IconButton>
          </Box>
        )}
      </Box>
    );
  }

  if (props.isPreview) {
    return null;
  }

  return (
    <Card elevation={2} className={clsx(classes.card)}>
      <Typography variant={"h5"}>
        {t("widget/crossnote.github_gist/title")}
      </Typography>
      <TextField
        label={t("widget/crossnote/github_gist/enter-github-gist-url")}
        placeholder={"https://gist.github.com/..."}
        value={url}
        onChange={(event) => setURL(event.target.value)}
        fullWidth={true}
        onKeyUp={(event) => {
          if (event.which === 13) {
            setGistURL(url);
          }
        }}
      ></TextField>
      <Box className={clsx(classes.actionButtonsGroup)}>
        <Tooltip title={t("general/Delete")}>
          <IconButton onClick={() => props.removeSelf()}>
            <TrashCan></TrashCan>
          </IconButton>
        </Tooltip>
      </Box>
    </Card>
  );
}

AddButton = (props: { onClick: () => void }) => {
  const { onClick } = props;

  const [clicked, setClicked] = useState(false);

  return (
    <Tooltip title="Add to Wallet" placement="top">
      <>
        {clicked === false && (
          <AddCircle
            className="add-button"
            onClick={() => {
              onClick();
              setClicked(true);
            }}
          />
        )}
        {clicked && <CheckCircle className="add-button" onClick={onClick} />}
      </>
    </Tooltip>
  );
}

function AvailableValueTag({ label, details }) {
  return (
    <Tooltip
      style={{
        zIndex: 9999,
        marginRight: 4,
      }}
      title={<>{details}</>}
    >
      <Chip label={label} size="small" />
    </Tooltip>
  );
}

function ExposureEventsTable({ experiment: { exposureEvents } }: { experiment: ExperimentFull }) {
  const classes = eventStyles()

  return (
    <div className={classes.eventList}>
      {exposureEvents && exposureEvents.length ? (
        exposureEvents.map((ev) => (
          <Typography className={classes.monospace} key={ev.event}>
            <Tooltip title={ev.event}>
              <span className={classes.eventName}>{ev.event}</span>
            </Tooltip>
            {ev.props &&
              Object.entries(ev.props).map(([key, val]) => (
                <span key={key} className={classes.entry}>
                  {key}: {val}
                </span>
              ))}
          </Typography>
        ))
      ) : (
        <span className={classes.monospace}>No exposure events defined</span>
      )}
    </div>
  )
}

FabWithTooltip: React.FC<MyFabProps> = (props) => {
  if (props.title) {
    return <Tooltip placement="top-start" arrow={true}
    title={props.title}>
    <span style={{paddingTop:20}} >
      <FabMain {...props} />
    </span>
    </Tooltip>
  }

  return <FabMain {...props} />
}

AlertStatus = ({ alert }: { alert: Alert }) => {
    const classes = useStyles();

    return (
        <Tooltip title={alert.status} placement="top">
            <div className={classes.denseListIcon}>
                {alert.status === 'open' ? <StatusError /> : <StatusOK />}
            </div>
        </Tooltip>
    );
}

BottomBar: React.FC<Props> = props => {
  const { username, image } = useSelector((state: IRootState) => state.auth);

  return (
    <div className={styles.container}>
      <div className={styles.wrapper}>
        <div className={styles.userBox}>
          <Tooltip title="Edit profile" placement="top">
            <img className={styles.image} alt="User" src={image} onClick={props.profileClick} />
          </Tooltip>

          <p className={styles.username}>{username}</p>
        </div>
        <div className={styles.buttonContainer}>
          <Tooltip title="Report a bug" placement="top">
            <IconButton className={styles.exitButton} onClick={props.bugClick}>
              <BugReportIcon className={styles.exit} />
            </IconButton>
          </Tooltip>
          <Tooltip title="Logout" placement="top">
            <IconButton className={styles.exitButton} onClick={props.exitClick}>
              <ExitToAppIcon className={styles.exit} />
            </IconButton>
          </Tooltip>
        </div>
      </div>
    </div>
  );
}

function TokenTags({ currency }: { currency: Token }) {
  const classes = useStyles();
  if (!(currency instanceof WrappedTokenInfo)) {
    return <span />;
  }

  const tags = currency.tags;
  if (!tags || tags.length === 0) return <span />;

  const tag = tags[0];

  return (
    <Box>
      <Tooltip title={tag.description}>
        <Box className={classes.tag} key={tag.id}>
          {tag.name}
        </Box>
      </Tooltip>
      {tags.length > 1 ? (
        <Tooltip
          title={tags
            .slice(1)
            .map(({ name, description }) => `${name}: ${description}`)
            .join('; \n')}
        >
          <Box className={classes.tag}>...</Box>
        </Tooltip>
      ) : null}
    </Box>
  );
}

DropdownInput: FunctionComponent<Props> = ({
  value,
  onChange,
  label,
  disabled,
  tooltip = '',
}) => {
  const [mainLabel, falseLabel, trueLabel] = label.split('|');

  return (
    <Tooltip title={tooltip} placement="bottom">
      <ListItem disabled={disabled}>
        <Box mr={2}>
          <Typography>{mainLabel}</Typography>
        </Box>
        <Select
          variant="outlined"
          margin="dense"
          color="secondary"
          value={value ? 'true' : 'false'}
          onChange={(event) => {
            event.preventDefault();
            onChange(event.target.value === 'true');
          }}
        >
          <MenuItem value="false">{falseLabel}</MenuItem>
          <MenuItem value="true">{trueLabel}</MenuItem>
        </Select>
      </ListItem>
    </Tooltip>
  );
}

function renderRow({data, index, style}: ListChildComponentProps) {
  const elToClone = data[index];
  const value = elToClone.props.children.props.children;
  const clone = React.cloneElement(elToClone, {
    style: {
      ...style,
      top: (style.top as number) + LISTBOX_PADDING,
    },
  });

  return (
    <Tooltip
      title={value || ''}
      key={`${value}-${index}-with-tooltip`}
      placement="bottom-start"
    >
      {clone}
    </Tooltip>
  );
}

_ControlsRegionBanner: FunctionComponent<ControlsRegionBannerProps> = ({
  regionKey,
  active,
  enableRegion,
}) => {
  const classes = useStyles();

  const region = getMapRegion(regionKey);

  const svgSource = `/images/controls/region-${regionKey}.svg`;
  const style = {
    backgroundColor: active ? '#fff' : region.color,
    borderLeft: active ? `8px solid ${region.color}` : '0px solid transparent',
  };

  return (
    <Tooltip title={localizeField(region.name)}>
      <Box
        className={clsx(classes.banner, active ? classes.bannerActive : classes.bannerInactive)}
        style={style}
        onClick={enableRegion}
        alignItems="center"
      >
        <img
          src={svgSource}
          className={clsx(
            classes.bannerImage,
            active ? classes.bannerImageActive : classes.bannerImageInactive
          )}
        />
      </Box>
    </Tooltip>
  );
}

CustomLink = ({
  to,
  tooltipTitle,
  isIcon,
  content,
  classes,
}: CustomLinkProps) => {
  return (
    <Tooltip title={tooltipTitle} placement="top" arrow>
      <Link className={classes.link} to={to}>
        {isIcon ? (
          <IconButton className={classes.button}>
            <Launch color="primary" />
          </IconButton>
        ) : (
          content
        )}
      </Link>
    </Tooltip>
  );
}

TechDocsThemeToggle = () => {
  const appThemeApi = useApi(appThemeApiRef);
  const classes = useStyles();
  const [theme, setTheme] = useState<Themes>(
    (appThemeApi.getActiveThemeId() as Themes) || Themes.LIGHT,
  );

  const themes = {
    [Themes.LIGHT]: {
      icon: DarkIcon,
      title: 'Dark theme',
    },
    [Themes.DARK]: {
      icon: LightIcon,
      title: 'Light theme',
    },
  };

  const { title, icon: Icon } = themes[theme];

  const handleSetTheme = () => {
    setTheme(prevTheme => {
      const newTheme = prevTheme === Themes.LIGHT ? Themes.DARK : Themes.LIGHT;
      appThemeApi.setActiveThemeId(newTheme);
      return newTheme;
    });
  };

  return (
    <Box display="flex" alignItems="center" mr={2}>
      <Tooltip title={title} arrow>
        <IconButton size="small" onClick={handleSetTheme}>
          <Icon className={classes.headerIcon} />
        </IconButton>
      </Tooltip>
    </Box>
  );
}

export function ImportButton(props: ImportButtonProps) {
  const { variant, label, clickImportButton, onFileAdded, onRef } = props;
  const translate = translateWrapper();
  return (
    <Tooltip title={translate("csv.buttonMain.tooltip")}>
      <div>
        <RAButton
          color="primary"
          component="span"
          variant={variant}
          label={label}
          onClick={clickImportButton}
        >
          <GetAppIcon style={{ transform: "rotate(180deg)", fontSize: "20" }} />
        </RAButton>
        <input
          ref={onRef}
          type="file"
          style={{ display: "none" }}
          onChange={onFileAdded}
          accept=".csv,.tsv"
        />
      </div>
    </Tooltip>
  );
}

export function ContentPageTwo({ accountManager }: ContentPageTwoProps) {
  return (
    <List>
      {accountManager &&
        accountManager.userAccounts &&
        accountManager.userAccounts.map((account, index) => (
          <ListItem>
            <ListItemText primary={account.alias} />
            <ListItemSecondaryAction>
              <Tooltip title="Download">
                <IconButton
                  edge="end"
                  onClick={() => {
                    accountManager.downloadPemFiles(account.alias);
                  }}
                >
                  <GetApp />
                </IconButton>
              </Tooltip>
            </ListItemSecondaryAction>
          </ListItem>
        ))}
    </List>
  );
}

FilterIconButton = (props: {
  icon?: OverridableComponent<SvgIconTypeMap>;
  iconClassName?: string;
  select: boolean;
  platformIds: Set<string>;
  invertSelection?: boolean;
}) => {
  const Icon = props.icon || FilterIcon;
  return (
    <FilterButtonBase
      select={props.select}
      platformIds={props.platformIds}
      invertSelection={props.invertSelection}
      renderButton={(onClick, disabled) => (
        <Tooltip title='Only show these platforms' placement='top'>
          <IconButton
            disabled={disabled}
            color='inherit'
            onClick={onClick}
          >
            <Icon
              className={props.iconClassName}
              fontSize='small'
              color='inherit'
            />
          </IconButton>
        </Tooltip>
      )}
    />
  );
}

CopyButton: React.FC<{ text: string }> = ({ text }) => {
  const [copied, setCopied] = useState(false);
  return (
    <Box
      padding="5px 0 0 10px"
      marginTop="auto"
      onClick={(e) => {
        e.preventDefault()
        navigator.clipboard.writeText(text);
        setCopied(true);

        setTimeout(() => {
          setCopied(false)
        }, 2000)
      }}
    >
      <Tooltip placement="bottom" title={!copied ? "Copy to Clipboard" : "Copied!"}>
        <CopyIcon color="secondary" fontSize="small" />
      </Tooltip>
    </Box>
  );
}

export default function MainToolBar(props:any) {
    const classes = useStyles();

    return (
        <Card className={classes.toolBarRoot}>
            <ButtonGroup variant="outlined" color="default" className={classes.toolBarButtonGroup}>
                <Tooltip title="Go Dark" aria-label="Go Dark" placement="top">
                    <Button
                        onClick={() => props.toDark(true)}
                        className={ props.darkMode === true ? classes.selected : ""}>
                        <Brightness3 />
                    </Button>
                </Tooltip>
                <Tooltip title="Light Up" aria-label="Light Up" placement="top">
                    <Button
                        onClick={() => props.toDark(false)}
                        className={ props.darkMode === false ? classes.selected : ""}>
                        <Brightness7 />
                    </Button>
                </Tooltip>
            </ButtonGroup>
        </Card>
    );
}

export default function ExpandableListItem({ label, value, tooltip }: Props): ReactElement | null {
  const classes = useStyles()

  return (
    <ListItem className={classes.header}>
      <Grid container direction="row" justifyContent="space-between" alignItems="center">
        {label && <Typography variant="body1">{label}</Typography>}
        {value && (
          <Typography variant="body2">
            {value}
            {tooltip && (
              <Tooltip title={tooltip} placement="top" arrow>
                <IconButton size="small" className={classes.copyValue}>
                  <Info strokeWidth={1} />
                </IconButton>
              </Tooltip>
            )}
          </Typography>
        )}
      </Grid>
    </ListItem>
  )
}

ReviewComment: FC<{ comment: string }> = ({ comment }) => {
    return (
        <div>
            {comment.length <= 200 ? (
                <Typography variant="caption" color="textPrimary">
                    {comment}
                </Typography>
            ) : (
                <Tooltip title={comment}>
                    <Typography variant="caption" color="textPrimary">
                        {truncateString(comment, 200)}
                    </Typography>
                </Tooltip>
            )}
        </div>
    );
}

export function TextWithTooltip(props: TextWithTooltipProps) {
  const {
    text,
    tooltip,
    icon
  } = props;
  const styles = useStyles();

  return (
    <div className={styles.root}>
      <span>{text}</span>
      {
        tooltip ? (
          <Tooltip arrow placement="top" title={<span>{tooltip}</span>}>
            { icon ? icon : <HelpOutline fontSize="small" /> }
          </Tooltip>
        ) : (
          icon || <HelpOutline fontSize="small" />
        )
      }
    </div>
  );
}

CartItemCell = ({ cartGroup, cartItem }: { cartGroup: CartGroup, cartItem: CartItem }) => {

	const classes = useStyles()
	const [user] = useUser()
	const [cart] = useCart()

	const addItem = async (event) => {
		event.preventDefault()
		event.stopPropagation()
		if (user) {
			if (cart) {
				const group = cart.cartGroup(cartGroup.groupID)
				group?.addItem(cartItem)
				await cart.save()
			} else {
				const cart = new Cart(user.id)
				const group = cart.cartGroup(cartGroup.groupID)
				group?.addItem(cartItem)
				await cart.save()
			}
		}
	}

	const deleteItem = async (event) => {
		event.preventDefault()
		event.stopPropagation()
		if (!cart) return
		const group = cart.cartGroup(cartGroup.groupID)
		group?.subtractItem(cartItem)
		if ((group?.items.length || 0) <= 0) {
			cart.groups = cart.groups.filter(group => group.groupID !== cartGroup.groupID)
		}
		await cart.save()
	}

	const imageURL = (cartItem.imageURLs().length > 0) ? cartItem.imageURLs()[0] : undefined
	const price = new Intl.NumberFormat("ja-JP", { style: "currency", currency: cartItem.currency }).format(cartItem.price())
	const subtotal = new Intl.NumberFormat("ja-JP", { style: "currency", currency: cartItem.currency }).format(cartItem.subtotal())

	return (
		<Box display="flex" padding={2}>
			<Box>
				<Avatar className={classes.avater} variant="rounded" src={imageURL}>
					<ImageIcon />
				</Avatar>
			</Box>
			<Box flexGrow={1}>
				<Box display="flex" justifyContent="space-between" flexGrow={1}>
					<Box mx={2}>
						<Typography variant="subtitle1">{cartItem.name}</Typography>
						<Typography variant="body1" color="textSecondary">{cartItem.caption}</Typography>
						<Typography variant="body1" color="textSecondary">{price}</Typography>
					</Box>
					<Box>
						<Box display="flex" justifyContent="flex-end" fontSize={16} fontWeight={500} >
							{subtotal}
						</Box>
						<Box display="flex" justifyContent="flex-end" alignItems="center" mx={0} my={0}>
							<Tooltip title="Remove">
								<IconButton onClick={deleteItem}>
									<RemoveCircleIcon color="inherit" />
								</IconButton>
							</Tooltip>
							<Box fontWeight={600} fontSize={16} mx={1}>
								{cartItem.quantity}
							</Box>
							<Tooltip title="Add">
								<IconButton onClick={addItem}>
									<AddCircleIcon color="inherit" />
								</IconButton>
							</Tooltip>
						</Box>
					</Box>
				</Box>
			</Box>
		</Box>
	)
}

CustomTooltip = withStyles((theme) => ({
  tooltip: {
    maxWidth: 300,
    fontSize: "1rem",
    borderRadius: ".5rem",
    fontWeight: "normal",
  },
}))(Tooltip)

export default function RichTooltip({
  render,
  emoji,
  message,
  dismissButtonText,
  dismissButtonProps,
  ...props
}: IRichTooltipProps) {
  const classes = useStyles();
  const [open, setOpen] = useState(false);

  const openTooltip = () => setOpen(true);
  const closeTooltip = () => setOpen(false);
  const toggleTooltip = () => setOpen((state) => !state);

  return (
    <Tooltip
      disableFocusListener
      disableHoverListener
      disableTouchListener
      arrow
      interactive
      open={open}
      onClose={closeTooltip}
      classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
      title={
        <div className={classes.grid} onClick={closeTooltip}>
          <span className={classes.emoji}>{emoji}</span>

          <div className={classes.message}>{message}</div>

          {dismissButtonText && (
            <Button
              {...dismissButtonProps}
              onClick={closeTooltip}
              className={clsx(
                classes.dismissButton,
                dismissButtonProps?.className
              )}
            >
              {dismissButtonText}
            </Button>
          )}
        </div>
      }
      {...props}
    >
      {render({ openTooltip, closeTooltip, toggleTooltip })}
    </Tooltip>
  );
}

/**
 * Displays the Deployment recommendation.
 */
export default function DeploymentRecommendation({
  analysis,
  experiment,
}: {
  analysis: Recommendation
  experiment: ExperimentFull
}): JSX.Element {
  const decorationClasses = useDecorationStyles()

  if (analysis.decision === Decision.ManualAnalysisRequired) {
    return (
      <Tooltip title='Contact @experimentation-review on #a8c-experiments'>
        <span className={decorationClasses.tooltipped}>Manual analysis required</span>
      </Tooltip>
    )
  }

  if (analysis.decision === Decision.MissingAnalysis) {
    return <>Not analyzed yet</>
  }

  if (analysis.strongEnoughForDeployment) {
    switch (analysis.decision) {
      case Decision.NoDifference: {
        return <>Deploy either variation</>
      }
      case Decision.VariantAhead:
      case Decision.VariantBarelyAhead: {
        return <>Deploy {getChosenVariation(experiment, analysis)?.name} cautiously</>
      }
      case Decision.VariantWins: {
        return <>Deploy {getChosenVariation(experiment, analysis)?.name} with confidence</>
      }
    }
  }

  return <>Not enough certainty</>
}

ChatInBar: React.FC<BMProps&TextLineStyle>  = (props) => {
  //  console.log('Render RawContentList')
  const {chat, roomInfo, participants, map} = props.stores
  const classes = styleForList({height:props.lineHeight, fontSize:props.fontSize})
  const [text, setText] = React.useState('')

  return <div className={classes.container}
    style={{height:'100%', display:'flex', flexDirection: 'column-reverse',
    overflowY:'auto', overflowX:'clip', whiteSpace: 'pre-line'}} >
    <form noValidate autoComplete="off">
      <Tooltip title={t('cmSend')} placement="right">
        <div style={{position:'relative', top:26, marginTop:-26, textAlign:'right', zIndex:1000}}>
          <IconButton size={'small'} onClick={()=>{
            const nameTo = chat.sendTo ?
              participants?.find(chat.sendTo)?.information?.name : undefined
            sendChatMessage(text, nameTo ? chat.sendTo : '', props)
            setText('')
          }}>
            <SendIcon color="primary" />
          </IconButton>
        </div>
      </Tooltip>
      <Observer>{()=>{
        const nameTo = chat.sendTo ? participants?.find(chat.sendTo)?.information?.name : undefined
        const textColor = isDarkColor(roomInfo.backgroundFill) ? 'white' : 'black'

        return <TextField label={nameTo ? t('cmToName', {name: nameTo}) : t('cmToAll')} multiline={true} value={text}
          style={{width:'100%', userSelect:'none'}} size={props.lineHeight > 20 ? 'medium' : 'small'}
          InputProps={{style:{color:textColor}}}
          InputLabelProps={{style:{color:textColor}}}
          onFocus={()=>{map.keyInputUsers.add('chat')}}
          onBlur={()=>{map.keyInputUsers.delete('chat')}}
          onKeyDown={(ev)=>{
            //  console.log(`key = ${ev.key}`, ev)
            if (ev.key === 'Escape' || ev.key === 'Esc'){ //  Esc key
              chat.sendTo = ''
            }
          }}
          onKeyPress={(ev)=>{
            //  if (ev.key === 'Enter'){  }
            if (ev.key === '\n'){ //  CTRL + Enter
              sendChatMessage(text, nameTo ? chat.sendTo : '', props)
              setText('')
            }
          }}
          onChange={(ev)=>{ setText(ev.target.value) }}
        />
      }}</Observer>
    </form>
    <div>{  /* for indent: style={{marginLeft: '0.5em', textIndent: '-0.5em'}} */}
      <Observer>{()=><>{
        chat.messages.map((m, idx) =>
          <ChatLine key={idx} message={m} {...props} /> )
        }</>}</Observer>
    </div>
  </div>
}

MonitoringCard: React.FC = () => {
    const [open, setOpen] = React.useState(false);
    const metrics = useSelector((state: RootState) => state.monitoring.activeMetrics);

    const handleOpen = () => { setOpen(true); }
    const handleClose = () => { setOpen(false); }

    const cardActions = (
        <Box>
            <Tooltip title="Select metrics" placement="left">
                <IconButton aria-label="delete" color="default" onClick={handleOpen}>
                    <SettingsIcon />
                </IconButton>
            </Tooltip>
        </Box>
    );

    const activeMetrics = Object.keys(metrics)
        .filter(m => metrics[m as MonitoringMetric].active);

    const computeChartWidth = (len: number, idx: number) => {
        if (len > 1) {
            return (((idx % 2) === 0) && (idx === len - 1) ? '100%' : '50%');
        } else {
            return '100%';
        }
    }

    const charts = activeMetrics.map((metric, index) => (
        <Box width={computeChartWidth(activeMetrics.length, index)}>
            <MetricChart metric={metric as MonitoringMetric} key={`chart-${metric as string}`} />
        </Box>
    ));

    const noSelected = (charts.length === 0) && (
        <Box display="flex" justifyContent="center">
            <Typography>No metric selected.</Typography>
        </Box>
    );

    return (
        <MainCard title="Monitoring" actions={cardActions}>
            <MonitoringDialog open={open} onClose={handleClose} />
            <Box display="flex" flexWrap="wrap" width="100%" p={1}>
                {charts}
            </Box>

            {noSelected}
        </MainCard>
    );
}

render(): React.ReactElement {
    return (
      <ListItem className={classes(logEntryClass)}>
        <Grid container alignItems="center" justify="space-between" spacing={2}>
          <Grid item>
            <Tooltip title={this.props.file.path}>
              <Typography variant="body2">
                {this.props.file.path.substring(
                  this.props.file.path.lastIndexOf('/') + 1
                )}
              </Typography>
            </Tooltip>
          </Grid>
          <Grid item>
            <IconButton
              title={this.state.resolved ? 'View Resolved File' : 'View Diff'}
              onClick={() => this._onView()}
            >
              <CompareIcon fontSize="small" />
            </IconButton>
            <IconButton
              className={
                this.state.resolved ? classes(disableHoverClass) : undefined
              }
              title={this.state.resolved ? 'Resolved' : 'Mark As Resolved'}
              onClick={() => this._onResolve()}
              disableFocusRipple={this.state.resolved}
              disableRipple={this.state.resolved}
            >
              {this.state.resolved ? (
                <CheckBoxIcon fontSize="small" />
              ) : (
                <CheckBoxOutlineBlankIcon fontSize="small" />
              )}
            </IconButton>
          </Grid>
        </Grid>
      </ListItem>
    );
  }

StatusTooltip = withStyles({
    tooltipPlacementBottom: {
        margin: '12px 0'
    }
})(Tooltip)