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

Question

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

If you could include your CSS and HTML into the link, that would be great, and would help SO users find the answer faster. — IPSDSILVA
– IPSDSILVA, Commented Jun 1, 2020 at 22:58
css is already avaiable under the styles.css in that link. — soccerway
– soccerway, Commented Jun 1, 2020 at 23:12

Józef Podlecki · Accepted Answer · 2020-06-01 23:06:21Z

1

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>

answered Jun 1, 2020 at 23:06

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

soccerway Over a year ago

Happy to say that height and width extension is not happening anymore. In desktop view it look good, but in mobile view its going out of the container.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related