Component with HTML, CSS e (a bit of) Javascript

I think you forget to add background-repeat: no-repeat to .main-image selector. If U try to open your element on Galaxy Fold (From Chrome Developer Tools) you can see your background image start to repeating.

Also in my opinion if U can make something with Pure CSS don't this with JavaScript :)

Happy Coding :)

open-on-click:

I used the JavaScript to control it, to break it down:

1. You need an event listener to that share button, when it clicked, change the class list of the tooltip.

2. Depends on your favor, I like to add "active" class to anything where I want to control display or not. In this case, default tooltip has nothing but only display:none; to it. When the "active" class applied, then I add all the additional css to it.

3. In css, it would like something below:

.tooltip { display: none; }

.tooltip.active { display: block; background-color: gray; /** all other css **/ }

For the little triangle, I used the css where I found in css trick: https://css-tricks.com/snippets/css/css-triangle/

This chunk of code works for me:

.arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; }

Hope these information helped!