CODEWITHSUNDEEP
cssreactjs
soccerway
soccerway

Reputation: 11931

Tooltip display on top without affecting the height and width of container

On click on the image, number displays as tooltip message for 4 seconds and disappears. This is working as expected. But while displaying the tooltip, the div height and width got changed. How can we display the tool tip on top of the image without affecting the height/width of the grid-container

I haved added a demo here:

https://codesandbox.io/s/amazing-ellis-2h3pd?file=/src/components/Home.js

Upvotes: 1

Views: 481

Answers (1)

Józef Podlecki
Józef Podlecki

Reputation: 11283

First Solution

You can set position: absolute and apply necessary margins to make it appear on top of the image

{phoneTooltip === id && (
  <div style={{position: 'absolute', marginLeft: '100px', zIndex: 1, marginTop: '-50px'}} 
    className="tooltip_PhoneNumber_home" key={phonenumber}>
      {phonenumber}
</div>
)}

Second Solution

Refactor jsx so tooltip is always on top of image but with visibility: hidden, opacity: 0 and click action makes it visible.

<span className="phoneNumber_home">
  <div style={{opacity: phoneTooltip === id ? 1 : 0}} className="tooltip_PhoneNumber_home" key={phonenumber}>
    {phonenumber}
  </div>
  <img
    src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png"
    alt={"phoneTooltip.show"}
    key={id}
    name="phoneNumberhomeicon"
    onClick={displayPhoneToolTip(id)}/>
</span>

Upvotes: 1

Related Questions