Preface

When I used antd’s tooltip component in a recent project, I found that it is a bit unstable. It often floats to the upper left corner. It is confusing and I don’t know how to solve it. In addition, it is a tooltip added on each dom. If the amount of data is large, redundant DOM elements will be generated, so I think of the react-tooltip component, which can set the tooltip globally, and just add data-tip=’xxxx’ to the DOM you want to prompt, and I also use this component in my project, but recently I discovered a problem, that is, the writing method of the v5 version is very different from that of v4, so I impulsively wrote a tooltip to meet my own needs and share it with everyone.

operate

Implementation steps of tooltip component:
1. Create a suspended dom div, set the basic style and make it hidden

Components:

const tooltipRef = useRef(null)
const [content, setContent] = useState(null)

<div className={styles.tooltip} ref = {tooltipRef }>
   {content}
</div>

The function of the code explained here const tooltipRef = useRef(null)is to control the position of the tooltip element through ref, which will be discussed later.
const [content, setContent] = useState(null)The use is the content you want to display in the tooltip, which can be customized here.

style:

.tooltip{
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 170px;
    background-color: #000;
    color: #fff;
    visibility: hidden;
    z-index: 100;
    border-radius: 6px;
    font-size: 12px;
}

// 制作三角箭头
.tooltip::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

The above are all basic styles plus triangular arrows.

2. Add a hover event on the DOM element you want to prompt

// When the mouse moves away 
onMouseLeave={ ( e,value,currentDate ) => {
   // Hide the tooltip when the mouse moves away 
  tooltipRef. current . style = `visibility:hidden;`
}}
//The mouse enters 
onMouseOver={ ( e, value, currentDate )=> {
   // Get the left and top of your dom element from the window. This left and top are the relative positions of your tooltip 
  const { left, top } = e. currentTarget . getBoundingClientRect ();
   // With left and top we set the position of the tooltip, and set the visibility to the display state 
  tooltipRef. current . style = `visibility:visible;top: ${top- 42 } px;left: $ {left- 79 } px` 
  if (!value || !value. date ) {
     setCalContent ( `Submitted 0 times, ${currentDate} ` )
  } else {
     setCalContent ( `Submitted ${value.count} times, ${value.date} ` )
  }
}}

Here there are two events on your component or dom element: onMouseOverand onMouseLeave.
onMouseOverThe use is when the mouse moves over it.
2.1. First get the position coordinate information of the element.
const { left, top } = e.currentTarget.getBoundingClientRect();
2.2. With the coordinates, we have to let the tooltip display there`visibility
tooltipRef.current.style = :visible;top:${top-42}px;left: ${ left-79}px `
2.3, and set the displayed content
setCalContent(xxxx)

Summarize

1. You must first understand the implementation idea. Once you have the idea, it will be simple to implement. If you really don’t know, you can look at other people’s code.
2. The most important point is actually how to obtain the position coordinate information of the prompted component or element, so e.currentTarget.getBoundingClientRect()the code is very important.
3. With the coordinates, you can set the position where the tooltip is to be displayed, but you still need to adjust it manually top:${top-42}px;left: ${left-79}px.

Quote

CSS Tooltip
getBoundingClientRect
MDN getBoundingClientRect