Create CSS tooltips to appear on hover AND on click

Question

I'm creating a page where I can help describe some key information on an invoice. The requirement is that when I hover over a line, the line will be outlined. In addition, a tooltip will appear with a description of the line. I've been able to create this example below.

What I also want to do, is have that same functionality if the line it clicked (or touched on mobile), so it is more mobile friendly. When the mouse hovers out, or clicks elsewhere, the tooltip will disappear.

I've created this basic code already, which is functional for the first half of my requirement.

The image of the invoice is just a sample, so the 3 lines in this example will not line up with anything.

I'm just not sure where to go from here, any ideas?

    #bill{
        background-image: url('https://i.pinimg.com/originals/7d/f8/7c/7df87ca81bd2056cc7774ce942d71f57.gif');
        background-size:     cover;
        background-repeat: no-repeat; 
        background-position: 0 0;
        width:940px;
        height:1216px;
     position:relative;
    }
    
    #tip_01,
    #tip_02,
    #tip_03{
     position:absolute;
    }
    
    .tiptext {
     visibility:hidden;
     width: 200px;
     padding: 10px;
     background-color: #000;
     color: #fff;
     font-size:0.6em;
     position: absolute;
     z-index: 1;
     opacity:0;
     transition:opacity 0.3s;
     
    }
    
    #tip_01:hover .tiptext, 
    #tip_02:hover .tiptext, 
    #tip_03:hover .tiptext{
     visibility:visible;
     opacity:1;
    }
    
    #tip_01:hover,
    #tip_02:hover,
    #tip_03:hover{
     display:block;
     background-color:rgba(0,175,236,0.6);
    }
    
    
    
    #tip_01{
     left:60px;
     top: 214px;
     height:15px;
     width:405px;
     -webkit-border-radius: 10px 10px 10px 10px;
     border-radius: 10px 10px 10px 10px;
    }
    #tip_02{
     left:60px;
     top: 231px;
     height:15px;
     width:405px;
     -webkit-border-radius: 10px 10px 10px 10px;
     border-radius: 10px 10px 10px 10px;
    }
    #tip_03{
     left:60px;
     top: 250px;
     height:15px;
     width:405px;
     -webkit-border-radius: 10px 10px 10px 10px;
     border-radius: 10px 10px 10px 10px;
    }
    
    .tip_left {
    -webkit-border-radius: 0 20px 20px 20px;
    border-radius: 0 20px 20px 20px;
    top: 100%;
    left: 50%;
    }
    
    .tip_right {
    -webkit-border-radius: 20px 0 20px 20px;
    border-radius: 20px 0 20px 20px;
    top: 100%;
    left: -50%;
    }
    

<h1>Understanding Your Bill</h1>
    <p>If you have questions about how to read your bill, we can help........</p>
    <div id="bill">
    <div id="tip_01">
    <!--Account Holder-->
     <span class="tiptext tip_left">ACCOUNT HOLDER<br><br>This is the name of the account holder.  </span>
    </div>
    <div id="tip_02">
    <!--Invoice Date:-->
     <span class="tiptext tip_left">INVOICE DATE<br><br>This is the date your invoice was created.  </span>
    </div>
    <div id="tip_03">
        <span class="tiptext tip_left">There are about 10 more lines to explain</span>
    </div>
</div>