@material-ui/core#Tooltip JavaScript Examples

Address = ({ address, isCopyable, ...rest }) => {
  const [isOver, setIsOver] = useState(false);
  const classes = useStyles();
  const { enqueueSnackbar } = useSnackbar();
  const formattedAddress = [address?.slice(0, 10), ".....", address?.slice(address?.length - 6)].join("");

  const onClick = (event) => {
    event.preventDefault();
    event.stopPropagation();

    if (isCopyable) {
      copyTextToClipboard(address);
      enqueueSnackbar(<Snackbar title="Address copied to clipboard!" iconVariant="success" />, {
        variant: "success",
        autoHideDuration: 2000
      });
    }
  };

  return (
    <Tooltip classes={{ tooltip: classes.tooltip }} arrow title={address} interactive>
      <Box
        className={clsx(classes.root, { [classes.copy]: isCopyable })}
        component="span"
        onClick={onClick}
        onMouseOver={() => setIsOver(true)}
        onMouseOut={() => setIsOver(false)}
        {...rest}
      >
        <span>{formattedAddress}</span>

        {isCopyable && <FileCopy className={clsx(classes.copyIcon, { [classes.showIcon]: isOver })} />}
      </Box>
    </Tooltip>
  );
}

showAllBlocks() {
        const classes = this.props.classes;
        const allBlocks = (this.state.blocks || []).map(block => {
            return (
                <Card className={classes.ledgerDetail} key={"block_" + block.number} onClick={this.handleShowBlockDetail(block)}>
                    <CardContent>
                        <Typography display="inline" color="textSecondary">
                            {i18n("block")}: {block.number}
                        </Typography>
                        <Tooltip interactive title={i18n("block_hash") + ": " + block.blockHash}>
                            <Typography display="inline" className={classes.normalField} style={{ marginLeft: 20 }}>
                                {cntTrim(block.blockHash, 8)}
                            </Typography>
                        </Tooltip>

                        <Typography className={classes.normalField}>
                            {i18n("transaction")}: {block.transactions.length}
                        </Typography>

                        <Typography className={classes.normalField}>
                            {formatTime(block.time)}
                        </Typography>
                    </CardContent>
                </Card>);
        });

        return (
            <React.Fragment>
                {allBlocks}
                {
                    this.state.blocks && this.state.blocks.length > 0 && this.state.blocks[this.state.blocks.length - 1].number > 0 ?
                        this.showPreviousBlocks() : null
                }
            </React.Fragment>
        );
    }

SocialIcons = () => {
  const classes = useStyles();

  const socialItems = Resume.basics.profiles.map((socialItem) => (
    <Link
      href={socialItem.url}
      key={socialItem.network.toLowerCase()}
      target='_blank'
      rel='noopener noreferrer'
      underline='none'
      color='inherit'
    >
      <Tooltip
        title={socialItem.username}
        placement='left'
        TransitionComponent={Zoom}
      >
        <IconButton
          color='inherit'
          aria-label={socialItem.network}
          className={classes.iconButton}
        >
          <i className={`${classes.icon} ${socialItem.x_icon}`}></i>
        </IconButton>
      </Tooltip>
    </Link>
  ));

  return <div className={classes.socialIcons}>{socialItems}</div>;
}

Ability = ({ name, description, counters, deadly }) => (
  <ExpansionPanel elevation={2}>
    <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls={`${name}-content`}
      id={`${name}-content`}
    >
      <Typography>
        {deadly === true &&
        <Tooltip title="Caution! Deadly Ability">
          <span className="deadly-icon" />
        </Tooltip>
        }
        {name}
      </Typography>
    </ExpansionPanelSummary>
    <ExpansionPanelDetails>
      {description &&
      <Typography>
        {description}
      </Typography>}
      {counters !== undefined && counters.length > 0 &&
      <>
        <Typography variant="subtitle2" color="primary" component="div" className="tips">Tips:</Typography>
        <ul className="dashed">
          {counters.map((tip, i) => <li key={`${name}-${i}`}><Typography component="span">{tip}</Typography></li>)}
        </ul>
      </>}
    </ExpansionPanelDetails>
  </ExpansionPanel>
)

tooltip = (title, component) => {
  return (
    <Box display="inline-block" style={{ cursor: 'pointer' }}>
      <Tooltip
        title={title}
        placement="bottom"
        enterDelay={300}
      >
        {component}
      </Tooltip>
    </Box>
  )
}

ContributorAvatar = ({ contributor, large, children, tooltip, clickable, isUnhighlighted, props }) => {
    const classes = useStyles();

    let avatar = <Avatar src={contributor.avatar_url} className={`
      ${large ? classes.large : classes.small}
      ${isUnhighlighted && classes.unhighlighted}
      ${clickable && classes.clickable}
    `} {...props}>{children}</Avatar>
    return tooltip ? <Tooltip title={contributor.login} arrow>{avatar}</Tooltip> : avatar
}

CustomToolTip = ({ title, content, children }) => {
	const classes = useStyles();

	return (
		<Tooltip
			arrow
			classes={{
				tooltip: classes.tooltip,
				popper: classes.tooltipPopper,
			}}
			title={
				<React.Fragment>
					<Typography gutterBottom color="inherit">
						{title}
					</Typography>
					{content && <Typography>{content}</Typography>}
				</React.Fragment>
			}
		>
			{children}
		</Tooltip>
	);
}

function ContentPropertiesLayout(props) {
    const {
        classes,
        rows,
    } = props;
    return (
        <Table className={classes.table}>
            <TableBody>
                {rows.map(row => {
                    let contentPropertiesRowClassName = 'contentpropertiesrow';
                    if (typeof row.cssClassName !== 'undefined') {
                        contentPropertiesRowClassName += ' ' + row.cssClassName;
                    }
                    let displayValue = row.value;
                    if (typeof row.fullValue !== 'undefined') {
                        displayValue = (
                            <Tooltip
                                title={row.fullValue}
                                classes={{ tooltip: classes.tooltip }}
                                placement="top"
                            >
                                <span>{row.value}</span>
                            </Tooltip>
                        );
                    }
                    return (
                        <TableRow className={contentPropertiesRowClassName} key={row.label}>
                            <TableCell className="contentpropertieslabel">{row.label}</TableCell>
                            <TableCell className="contentpropertiesvalue">
                                {displayValue}
                            </TableCell>
                        </TableRow>
                    );
                })}
            </TableBody>
        </Table>
    );
}

File = ({ name, handler }) => {
    const history = useHistory();
    const classes = useStyles();

    return (
        <Fragment>
            <Tooltip title={name} arrow>
                <Button
                    onClick={() => {
                        handler(name);
                    }}
                >
                    <Grid
                        container
                        direction="column"
                        justify="center"
                        alignItems="stretch"
                        spacing={0}
                    >
                        <Grid item>
                            <Description className={classes.folder} />
                        </Grid>
                        <Grid item>
                            <Typography variant="button" display="block" noWrap>
                                {name}
                            </Typography>
                        </Grid>
                    </Grid>
                </Button>
            </Tooltip>
        </Fragment>
    );
}

CustomTooltip = withStyles(theme => ({
  tooltip: {
    backgroundColor: '#fff',
    color: 'rgba(0, 0, 0, 0.87)',
    width: 100,
    borderRadius: '0.5rem',
    boxShadow: '4px 4px 20px rgba(0,0,0,0.2)',
    fontSize: '1rem',
    fontWeight: 'bold',
    border: '1px solid #dadde9',
    padding: '0.5rem',
    textAlign: 'center',
    '& h4': {
      fontSize: theme.typography.pxToRem(12),
      fontWeight: 'normal',
      marginBottom: '2px',
    },
    '& *': {
      margin: '5px',
    },
  },
}))(Tooltip)

DevicesBadge = () => {
  const { playback } = useContext(ClientContext);
  const [state] = playback;
  const [nbrDevices, setNbrDevices] = useState("0");
  // eslint-disable-next-line
  const getNbrOfDevices = () => {
    const count = state.devices.filter((device) => device.selected === true)
      .length;
    setNbrDevices(count);
  };

  useEffect(() => {
    getNbrOfDevices();
  }, [state.devices, getNbrOfDevices]);

  return (
    <>
      <Tooltip title="Devices/Groups Selected" aria-label="Devices">
        <Badge color="secondary" badgeContent={nbrDevices}>
          <SpeakerIcon />
        </Badge>
      </Tooltip>
    </>
  );
}

function Footer() {
    return (
        <div className="footer">
            <div className="footer_container">
                <div className="footer_left">
                <p>
                    <b>HandReacting</b> is a project made with React JS 
                    For any suggestions or bug reports, visit 
                    <a href='https://github.com/hhhrrrttt222111/handReacting' target="_blank" rel="noopener noreferrer">
                        <Tooltip title="Visit Github Repo" placement="bottom" TransitionComponent={Zoom}>
                            <GitHubIcon />
                        </Tooltip> 
                    </a>
                    repo and raise an issue. And yes, you can also thank me for making your life easier by 
                    giving a ⭐ for the HandReacting repository. <br /><br />
                    Thanks for dropping by! <br /><br /><br /><br />
                </p>
                </div>
                <div className="footer_right">
                    <img src={footer} alt="img" />
                </div>
            </div>

            <div className="footer_hrt">
                <h3>Made with <span role="img" aria-label="necro">?</span> by <a href='https://github.com/hhhrrrttt222111' target="_blank" rel="noopener noreferrer">HRT</a></h3>
            </div>
            

        </div>
    )
}

ButtonSignIn = ({ handleOpen, user }) => {
  const classes = useStyles();

  if (!user) return (
    <Button variant="contained" color="primary" onClick={handleOpen}>
      Вхід
    </Button>
  );
  return (
    <Link to="/account">
      <Tooltip title="Особистий кабінет">
        <PersonIcon fontSize="large" className={classes.personIcon} />
      </Tooltip>
    </Link>
  );
}

describe('ColorCircle tests', () => {
  const mockOnDelete = jest.fn(noop);
  let wrapper;

  beforeEach(() => {
    wrapper = mount(
      <ColorCircle color={mockColor} size={mockSize} onDelete={mockOnDelete} />
    );
  });

  afterEach(() => {
    wrapper.unmount();
    mockOnDelete.mockClear();
  });

  it('should render Tooltip component', () => {
    expect(wrapper.exists(Tooltip)).toBe(true);
    expect(wrapper.find(Tooltip).children()).toHaveLength(1);
  });

  it('should run onDelete when click on the div', () => {
    wrapper.find('div').simulate('click');
    expect(mockOnDelete).toHaveBeenCalledTimes(1);
  });
});

Image = (props) => {
  const img = useRef(null)

  return (
    <section className={`img_section`} style={{ margin: 'auto' }}>
      <picture>
        <source media={props.media} sizes={props.sizes} type={props.type} srcSet={props.srcset} />
        <img
          src={props.src}
          ref={img}
          alt={props.alt}
          className={props.className}
          crossOrigin={props.crossOrigin}
          decoding={props.decoding ? props.decoding : 'async'}
          height={props.height}
          width={props.width}
          loading={props.loading ? props.loading : 'lazy'}
          referrerPolicy={props.referrerPolicy}
          hspace={props.hspace}
          id={props.id}
          vspace={props.vspace}
          longdesc={props.longdesc}
          align={props.align}
          useMap={props.useMap}
        />
      </picture>
      {props.download ?
        <Tooltip title="Download" aria-label="add" >
          <div className="download_btn">
            <a download={props.name ? props.name : 'my image'} href={props.src} className="download_lnk"><MdFileDownload /></a>
          </div>
        </Tooltip> : <></>}
      {img.current ? <>{img.current.complete ? <></> : <div className="blur_overlay"></div>}</> : <></>}
    </section>
  )
}

BootstrapTooltip = withStyles((theme) => ({
  arrow: {
    color: theme.palette.common.black,
  },
  tooltip: {
    backgroundColor: theme.palette.common.black,
    fontSize: 16,
  },
}))(Tooltip)

// Toggle SongLIst Button, present inside Player
function ToggleSongListBtn() {
  const dispatch = useDispatch();

  return (
    <Tooltip title="Show SongList" arrow placement="left">
      <IconButton
        className="player__iconButton player__mainBtn"
        onClick={() => {
          dispatch(toggleIsSongListOpen());
        }}
      >
        <QueueMusicIcon />
      </IconButton>
    </Tooltip>
  );
}

UserMenuItem = ({ userMenu, drawerOpen, activeRoute, withGradient }) => {
  const classes = useStyles({withGradient})
  const { t } = useTranslation()

  const navLinkClasses =
    classes.itemLink +
    ' ' +
    cx({
      [' ' + classes.menuActiveColor]: activeRoute(userMenu.path)
    })
  const itemText =
    classes.itemText +
    ' ' +
    cx({
      [classes.itemTextMini]: !drawerOpen
    })

  const text = t(userMenu.text)

  return (
    <Tooltip disableHoverListener={drawerOpen} title={text}>
      <ListItem className={classes.collapseItem}>
        <NavLink to={userMenu.path} className={navLinkClasses}>
          <ListItemIcon className={classes.itemIcon}>{userMenu.icon}</ListItemIcon>
          <ListItemText primary={text} disableTypography={true} className={itemText} />
        </NavLink>
      </ListItem>
    </Tooltip>
  )
}

IconButton = ({
  disabled,
  icon,
  label,
  onClick,
  tooltipProps,
  ...restProps
}) => (
  <Tooltip
    title={<StyledTooltipLabel>{label}</StyledTooltipLabel>}
    {...tooltipProps}
  >
    <div>
      <MuiIconButton
        disabled={disabled}
        onClick={onClick}
        size="small"
        {...restProps}
      >
        {icon}
      </MuiIconButton>
    </div>
  </Tooltip>
)

TooltipHeader = ({ text, children }) => (
  <Tooltip title={text} placement="right">
    <div
      style={{
        width: "200px",
      }}
    >
      <span>
        <Typography variant="body2" noWrap>
          {children || text}
        </Typography>
      </span>
    </div>
  </Tooltip>
)

export default function ParticipantConnectionIndicator({ participant }) {
  const isReconnecting = useParticipantIsReconnecting(participant);
  const classes = useStyles();
  return (
    <Tooltip title={isReconnecting ? 'Participant is reconnecting' : 'Participant is connected'}>
      <span className={clsx(classes.indicator, {[classes.isReconnecting]: isReconnecting})}/>
    </Tooltip>
  );
}

function ShareButton({ disabled, queue, setNowPlaying }) {
  const handleClick = () => {
    setNowPlaying(queue[0]);
  };

  return (
    <Tooltip title={disabled ? "Search for songs and add them to your queue" : ""}>
      <Box mt={1}>
        <IconButton
          edge="end"
          title="Play queue from beginning"
          disabled={disabled}
          onClick={handleClick}
          target="_blank"
          color={disabled ? "inherit" : "secondary"}
        >
          <PlayIcon />
        </IconButton>
      </Box>
    </Tooltip>
  );
}

LeftNav = ({ onOpenMenuClick, isNavOpen }) => {
  const classes = useStyles();
  const location = useLocation();

  const routes = [
    { title: "Dashboard", icon: (props) => <DashboardIcon {...props} />, url: UrlService.dashboard(), activeRoutes: [UrlService.dashboard()] },
    {
      title: "Deployments",
      icon: (props) => <CloudIcon {...props} />,
      url: UrlService.deploymentList(),
      activeRoutes: [UrlService.deploymentList(), "/deployment"]
    },
    { title: "Templates", icon: (props) => <CollectionsIcon {...props} />, url: UrlService.templates(), activeRoutes: [UrlService.templates()] },
    { title: "Providers", icon: (props) => <DnsIcon {...props} />, url: UrlService.providers(), activeRoutes: [UrlService.providers()] },
    { title: "Settings", icon: (props) => <SettingsIcon {...props} />, url: UrlService.settings(), activeRoutes: [UrlService.settings()] }
  ];

  return (
    <div className={classes.root} style={{ width: isNavOpen ? drawerWidth : closedDrawerWidth }}>
      <List className={classes.list}>
        <ListItem>
          <ListItemIcon className={classes.closedListItemIcon}>
            <IconButton size="small" onClick={onOpenMenuClick} className={classes.toggleButton}>
              {isNavOpen ? <MenuOpenIcon /> : <MenuIcon />}
            </IconButton>
          </ListItemIcon>

          <ListItemText
            primary={
              <Button size="small" variant="contained" color="primary" fullWidth component={Link} to="/createDeployment" className={classes.deployButton}>
                Deploy
              </Button>
            }
            primaryTypographyProps={{
              component: "div",
              className: classes.deployButtonContainer,
              style: { opacity: isNavOpen ? 1 : 0, flex: 1 }
            }}
          />
        </ListItem>

        {routes.map((route) => {
          const isSelected = route.url === UrlService.dashboard() ? location.pathname === "/" : route.activeRoutes.some((x) => location.pathname.startsWith(x));
          const listItemIcon = (
            <ListItemIcon color="primary" className={classes.closedListItemIcon}>
              {route.icon({ color: isSelected ? "primary" : "disabled" })}
            </ListItemIcon>
          );

          return (
            <ListItem button key={route.title} component={Link} to={route.url} selected={isSelected}>
              {isNavOpen ? (
                listItemIcon
              ) : (
                <Tooltip classes={{ tooltip: classes.tooltip }} arrow title={route.title} placement="right">
                  {listItemIcon}
                </Tooltip>
              )}

              <ListItemText
                primary={route.title}
                primaryTypographyProps={{
                  className: clsx(classes.listText, { [classes.selected]: isSelected, [classes.notSelected]: !isSelected }),
                  style: { opacity: isNavOpen ? 1 : 0 }
                }}
              />
            </ListItem>
          );
        })}
      </List>
    </div>
  );
}

export default function LightTooltip(props) {
  const classes = useStyles();

  return <Tooltip arrow classes={classes} {...props} />;
}

export default function Topbar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="fixed">
        <Toolbar>
          <Grid container>
            <Grid item xs={6} sm={4} md={2}>
              <img src={logo} alt="logo" className={classes.logo} />
            </Grid>
            <Grid item xs={12} sm={6} md={8} className={classes.title}>
              <Typography variant="h5">USFM Grammar Online</Typography>
            </Grid>
            <Grid item xs={6} sm={2} md={2}>
              <Box
                display="flex"
                flexDirection="row-reverse"
                p={1}
                m={1.5}
                mr={0}
              >
                <Tooltip title="GitHub code repository">
                  <IconButton
                    variant="outlined"
                    className={classes.button}
                    color="inherit"
                    href="https://github.com/Bridgeconn/usfm-grammar"
                    target="_blank"
                    rel="noopener"
                  >
                    <GitHubIcon />
                  </IconButton>
                </Tooltip>
                <Typography className={classes.version}>v2.2.0</Typography>
              </Box>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default function HeaderLinks(props) {
  const classes = useStyles();

  return (
    <List className={classes.list + " " + classes.mlAuto}>
      <ListItem className={classes.listItem}>
        <Link className={classes.dropdownLink} to="/">
          Home
        </Link>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Link className={classes.dropdownLink} to="/about">
          About Us
        </Link>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Link className={classes.dropdownLink} to="/contact">
          Contact Us
        </Link>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Tooltip
          id="instagram-twitter"
          title="Follow me on twitter"
          placement={window.innerWidth > 959 ? "top" : "left"}
          classes={{ tooltip: classes.tooltip }}
        >
          <Button
            href="https://twitter.com/DreamsOfImran"
            target="_blank"
            color="transparent"
            className={classes.navLink}
          >
            <i className={classes.socialIcons + " fab fa-twitter"} />
          </Button>
        </Tooltip>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Tooltip
          id="instagram-facebook"
          title="Follow me on facebook"
          placement={window.innerWidth > 959 ? "top" : "left"}
          classes={{ tooltip: classes.tooltip }}
        >
          <Button
            color="transparent"
            href="https://www.facebook.com/DreamsOfImran"
            target="_blank"
            className={classes.navLink}
          >
            <i className={classes.socialIcons + " fab fa-facebook"} />
          </Button>
        </Tooltip>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Tooltip
          id="instagram-tooltip"
          title="Follow me on instagram"
          placement={window.innerWidth > 959 ? "top" : "left"}
          classes={{ tooltip: classes.tooltip }}
        >
          <Button
            color="transparent"
            href="https://www.instagram.com/dreamsofimran"
            target="_blank"
            className={classes.navLink}
          >
            <i className={classes.socialIcons + " fab fa-instagram"} />
          </Button>
        </Tooltip>
      </ListItem>
    </List>
  );
}

function BootstrapTooltip(props) {
  const classes = useStylesBootstrap();

  return <Tooltip arrow classes={classes} {...props} />;
}

export default function StepperFinish() {
  const classes = useStyles();
  const { state } = useState();
  const { nn_state } = useNNState();
  const {model_state} = useModelState();
  const [codeCopied, setCodeCopied] = React.useState(false);

  const copyToClipboard = (setCopied = true) => {
    navigator.clipboard.writeText(CodeGen(state, nn_state, model_state));
    setCodeCopied(setCopied);
  };

  const openInCollab = async () => {
    copyToClipboard(true);
    await new Promise((r) => setTimeout(r, 1200));
    window
      .open("https://colab.research.google.com/#create=true", "_blank")
      .focus();
  };

  return (
    <>
      <Typography className={classes.titleInner} color="textPrimary">
        You're all set to continue the journey!
      </Typography>
      <Grid
        direction="row"
        container
        justify="center"
        spacing={2}
        style={{ marginBottom: "8px" }}
      >
        <Grid item>
          <Tooltip
            title={codeCopied ? "Code copied!" : "Copy code"}
            placement="top"
          >
            <IconButton
              onClick={copyToClipboard}
              color="primary"
              component="span"
            >
              {codeCopied ? <AssignmentTurnedInIcon /> : <AssignmentIcon />}
            </IconButton>
          </Tooltip>
        </Grid>
        <Grid item>
          <Tooltip title="Launch Google Collab" placement="top">
            <IconButton onClick={openInCollab} color="primary" component="span">
              <ExitToAppIcon />
            </IconButton>
          </Tooltip>
        </Grid>
        <Grid item>
          <Tooltip title="Reset Otto" placement="top">
            <IconButton
              onClick={() => {
                window.location.reload();
                return false;
              }}
              color="primary"
              component="span"
            >
              <RotateLeftIcon />
            </IconButton>
          </Tooltip>
        </Grid>
      </Grid>
      <CodeContainer getIsShown={() => true} />
    </>
  );
}

render() {
    const { postId } = this.props;
    const { comments, commentCount, newComment, sortAsc } = this.state;

    return (
      <div className="section" id="comments">
        <AppBar position="static">
          <Toolbar variant="dense">
            <Typography variant="h6" className="title-text">
              Comments ({commentCount})
            </Typography>
            <Tooltip title={`Show ${sortAsc ? 'Newest' : 'Oldest'} First`}>
              <IconButton color="inherit" onClick={this.setSortAsc(!sortAsc)}>
                <SortIcon />
              </IconButton>
            </Tooltip>
            <IfPerm permission="comment.create">
              <Tooltip title="Write Comment">
                <IconButton color="inherit" onClick={this.handleNewComment}>
                  <CreateIcon />
                </IconButton>
              </Tooltip>
            </IfPerm>
          </Toolbar>
        </AppBar>
        <Paper className="body-container space-children comments-container">
          <Collapse in={newComment} unmountOnExit>
            <EditComment
              postId={postId}
              depth={2}
              onCancel={this.cancelNewComment}
              onUpdateComments={this.updateComments}
            />
          </Collapse>

          {comments && comments.map(comment => (
            <Comment
              {...comment}
              onUpdateComments={this.updateComments}
              key={`comment-${comment.id}`}
              depth={2}
              sortAsc={sortAsc}
            />))}
          {(!comments || comments.length === 0) &&
          <Typography align="center">
            There are no comments on this topic.
          </Typography>}
        </Paper>
      </div>
    );
  }