For a client, we created the following design to showcase their services:

As this seemed impossible to draw in svg or just css, I created these in a tool and saved them as a picture. In Gatsbyjs, my code would look like this (for just 1 of the services) :

<div className={styles.containerButtons}>
        <button
          className={styles.brainfoodBtn} >
          <StaticImage
            src="../images/brainfood.png"
            width={250}
            className={styles.brainfoodImage}
            alt="brainfood"
          ></StaticImage>
        </button>
        <span className={styles.brainfoodTxt}>
          Brainfood - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel
    tristique purus. Donec varius dui scelerisque, tristique enim et, mollis
    ex.
        </span>

Currently, the span is hidden. I'd like to add the functionality where, when clicked on one of the images, the text pops up as a modal, without creating this black overlay. Just a tooltip kind of way. Then, when someone clicks away (especially on mobile), I'd like the text to hide again. I tried doing this with hover, and it worked fine, but it doesn't work on mobile, sadly.

Would this be at all possible? I've tried some things, but never with success. Any tips welcome :)