@JeuriMorel
Posted
You did a good job with this one, Rebecca, nicely done.
I've run into two issues with the tooltip. The first is that its placement looks to be relative to the viewport and not the button which feels a little awkward as where it appears onscreen is rather inconsistent. The second is that since it has a lower z-index than the button, when the two overlap the button covers part of the tooltip. By default the button is covering the RE in SHARE when I open it while viewing the page on my laptop at fullscreen.
Marked as helpful
@bccpadge
Posted
@JeuriMorel Thank you for the feedback and will fix the solution per your recommendations.
@JeuriMorel
Posted
@bccpadge
You're welcome.
@bccpadge
Posted
@JeuriMorel
Can you explain to me what area of the code needs to be fixed with the tooltip and the button because I am unsure what to do?
Thanks,
Rebecca
@JeuriMorel
Posted
@bccpadge
These changes fixed everything for me when playing around with the dev tools. (I didn't notice any negative side effects, but you should double check just in case.)
- Add
position: relative;to either thearticle__cardorarticle_groupso that the tooltip's positioning is relative to the content of the card. - Play around with the tooltip's inset value for large viewports. Something like
inset: auto 17% 35% auto;is closer to the desktop design I saw on the challenge page. - When you do the above, part of the tooltip gets cut off because the card isn't allowing for overflow. Removing
overflow: hidden;from the card fixes this. Didn't find a need for the overflow to be there, but it's possible I missed something. - Just in case for some reason there continues to be overlap, I would adjust the
z-indexon the tooltip to at least be equal to or higher than thebutton's value.
Marked as helpful
@bccpadge
Posted
@JeuriMorel
Thank you!!!!
@bccpadge
Posted
@JeuriMorel
I want to let know you, I updated the code and everything looks good now.
@JeuriMorel
Posted
@bccpadge
Looks good to me too! :)
