We are using the tooltips from the Ant Design project. We want these tooltips to be disappeared after hovering it.

import React, { useState } from 'react';
import styled from 'styled-ponents';
import { Tooltip } from 'antd';
import Highlighter from 'react-highlight-words';

const TooltipText = ({
  children,
  className,
  tabIndex,
  fontSize,
  padding,
  highlightWord,
  style = { 'white-space': 'nowrap' },
  toolTipPlacement = 'top',
  clickable = true,
  onClick,
}) => {
  const [truncated, setTruncated] = useState(false);
  const updateOverflow = e => {
    const el = e.currentTarget;
    if (el.classList.contains('detail-location')) {
      const canvasContext = document.createElement('canvas').getContext('2d');
      if (
        Math.ceil(canvasContext.measureText(el.innerText).width) >
        2 * el.clientWidth
      )
        setTruncated(true);
    } else if (!truncated && el.scrollWidth > el.clientWidth) {
      setTruncated(true);
    }
  };
  return (
    <Tooltip
      title={truncated ? children : undefined}
      className={className}
      placement={toolTipPlacement}
    >
      <TextDiv
        onMouseEnter={updateOverflow}
        tabIndex={tabIndex}
        fontSize={fontSize}
        padding={padding}
        clickable={clickable}
        onClick={onClick}
        style={style}
      >
        <Highlighter
          textToHighlight={children || ''}
          searchWords={[highlightWord]}
          autoEscape
        />
      </TextDiv>
    </Tooltip>
  );
};

const TextDiv = styled.div`
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: ${props => props.fontSize || '0.69rem'};
  letter-spacing: 0;
  line-height: 1.06rem;
  padding: ${props => props.padding || '0'};
  & mark {
    background-color: rgba(255, 249, 0, 0.5);
    padding: 0;
  }
  &:hover {
    text-decoration: ${props => (props.clickable ? 'underline' : 'none')};
  }
`;

I played with the CSS properties 'ant-tooltip-inner, ant-tooltip-arrow, ant-tooltip', but it did not work. I added the 'hover' to the CSS propertied but it does not change anything. In the chrome DevTools, I put the 'hover' property into the CSS but it says that it is unknown property. I would be appreciated if you give the advise.

We are using the tooltips from the Ant Design project. We want these tooltips to be disappeared after hovering it.

import React, { useState } from 'react';
import styled from 'styled-ponents';
import { Tooltip } from 'antd';
import Highlighter from 'react-highlight-words';

const TooltipText = ({
  children,
  className,
  tabIndex,
  fontSize,
  padding,
  highlightWord,
  style = { 'white-space': 'nowrap' },
  toolTipPlacement = 'top',
  clickable = true,
  onClick,
}) => {
  const [truncated, setTruncated] = useState(false);
  const updateOverflow = e => {
    const el = e.currentTarget;
    if (el.classList.contains('detail-location')) {
      const canvasContext = document.createElement('canvas').getContext('2d');
      if (
        Math.ceil(canvasContext.measureText(el.innerText).width) >
        2 * el.clientWidth
      )
        setTruncated(true);
    } else if (!truncated && el.scrollWidth > el.clientWidth) {
      setTruncated(true);
    }
  };
  return (
    <Tooltip
      title={truncated ? children : undefined}
      className={className}
      placement={toolTipPlacement}
    >
      <TextDiv
        onMouseEnter={updateOverflow}
        tabIndex={tabIndex}
        fontSize={fontSize}
        padding={padding}
        clickable={clickable}
        onClick={onClick}
        style={style}
      >
        <Highlighter
          textToHighlight={children || ''}
          searchWords={[highlightWord]}
          autoEscape
        />
      </TextDiv>
    </Tooltip>
  );
};

const TextDiv = styled.div`
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: ${props => props.fontSize || '0.69rem'};
  letter-spacing: 0;
  line-height: 1.06rem;
  padding: ${props => props.padding || '0'};
  & mark {
    background-color: rgba(255, 249, 0, 0.5);
    padding: 0;
  }
  &:hover {
    text-decoration: ${props => (props.clickable ? 'underline' : 'none')};
  }
`;

I played with the CSS properties 'ant-tooltip-inner, ant-tooltip-arrow, ant-tooltip', but it did not work. I added the 'hover' to the CSS propertied but it does not change anything. In the chrome DevTools, I put the 'hover' property into the CSS but it says that it is unknown property. I would be appreciated if you give the advise.

• javascript
• reactjs
• antd

• Hi, wele to SO. It would very helpful if you can create a codesandbox.io which demonstrate you current situation. – Mosh Feu Commented Jul 21, 2021 at 8:30

1 Answer 1

You can set mouseLeaveDelay=0 to hide tooltip immediately.

<Tooltip mouseLeaveDelay={0}>Text</Tooltip>