创建CSS工具提示以在鼠标悬停和单击时显示

Question

我正在创建一个页面，可以在其中帮助描述发票上的一些关键信息。要求是，当我将鼠标悬停在一条线上时，将概述该行。此外，还会出现一个工具提示，并带有该行的描述。我已经能够在下面创建此示例。

我还想做的是，如果单击（或在移动设备上）点击该行，则具有相同的功能，因此对移动设备更加友好。当鼠标悬停或在其他位置单击时，工具提示将消失。

我已经创建了此基本代码，可以满足我上半部分的要求。

发票的图像只是一个示例，因此此示例中的3行不会对齐任何内容。

我只是不确定从这里出发，有什么想法吗？

    #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>