title: How to make the Antd tooltip box disappear after hovering over it?
body: <p>We are using the tooltips from the Ant Design project. We want these tooltips to be disappeared after hovering it.</p>
  <pre><code>import React, { useState } from 'react';
  import styled from 'styled-components';
  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,
  }) =&gt; {
    const [truncated, setTruncated] = useState(false);
    const updateOverflow = e =&gt; {
      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) &gt;
          2 * el.clientWidth
        )
          setTruncated(true);
      } else if (!truncated &amp;&amp; el.scrollWidth &gt; el.clientWidth) {
        setTruncated(true);
      }
    };
    return (
      &lt;Tooltip
        title={truncated ? children : undefined}
        className={className}
        placement={toolTipPlacement}
      &gt;
        &lt;TextDiv
          onMouseEnter={updateOverflow}
          tabIndex={tabIndex}
          fontSize={fontSize}
          padding={padding}
          clickable={clickable}
          onClick={onClick}
          style={style}
        &gt;
          &lt;Highlighter
            textToHighlight={children || ''}
            searchWords={[highlightWord]}
            autoEscape
          /&gt;
        &lt;/TextDiv&gt;
      &lt;/Tooltip&gt;
    );
  };
  
  const TextDiv = styled.div`
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: ${props =&gt; props.fontSize || '0.69rem'};
    letter-spacing: 0;
    line-height: 1.06rem;
    padding: ${props =&gt; props.padding || '0'};
    &amp; mark {
      background-color: rgba(255, 249, 0, 0.5);
      padding: 0;
    }
    &amp;:hover {
      text-decoration: ${props =&gt; (props.clickable ? 'underline' : 'none')};
    }
  `;
  </code></pre>
  <p>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.</p>