ボタンをクリックすると、HTMLとCSSを使用してボタンの左にツールチップヒントが表示されます。

Question

HTMLとCSSのみを使用してツールチップを設計しました。 以下は私のコードです。クリックするとツールチップが表示されます。

<div class="box" ng-show="displayTooltip"> 
       <ul> 
       <li>Coffee</li> 
       <li>Tea</li> 
       <li>Milk</li> 
       </ul> 
    </div> 
    <button ng-click="displayTooltip = true" >OK</button> 

CSSコード

div.box { 
    height:100px; 
    width:200px; 
    background-color:#eee; 
    border:1px solid #aaa; 
    position:relative;    
    top:50px; 
    left:50px; 
    border-radius:7px; 
} 

.box:before { 
    position:absolute;    
    right:-20px; 
    top:5px; 
    content:'';      
    height:0; 
    width:0; 
    border:10px solid transparent; 
    z-index:1;      
} 

.box:after{ 
    position:absolute;   
    right:-17px;  
    top:25px; 
    content:'';       
    height:0; 
    width:0; 
    border-top: 8px solid transparent; 
    border-left: 8px solid #aaa; 
    border-right: 8px solid transparent;   
    border-bottom: 8px solid transparent; 
    z-index:1;     
} 


ul{ 

    color:#D70A0A; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    } 
    li{ 
     border-bottom:2px solid black; 
     padding:5px; 
     } 
     li:last-child{ 
     border-bottom:none; 
     } 
    li:hover{ 

    color:black; 
    } 

私は正確にボタンのonclickの後にボタンに左このツールチップを表示したい.AND私は（ツールチップの外をクリックしたときにがツールチップを非表示にすると、ボタン）。 誰でもこれを手伝ってください。

Answer 1

このような何か：

<style> 
    div.box { 
     display: none; 
     position: absolute; 
    } 

    div.box.show { 
     display: block; 
    } 
</style> 

<div class="box" ng-show="displayTooltip"> 
    <ul> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
    </ul> 
</div> 

<button ng-click="displayTooltip = true">OK</button> 

<script> 
    var button = document.querySelector('button'); 
    var box = document.querySelector('.box'); 
    document.body.addEventListener('click', function() { 
     box.classList.remove('show'); 
    }); 
    button.addEventListener('click', function (e) { 
     e.stopImmediatePropagation(); 
     box.classList.add('show'); 
     box.style.left = e.target.offsetLeft + 'px'; 
     box.style.top = (e.target.offsetTop + 
         e.target.offsetHeight) + 'px'; 
    }); 
</script> 

はNOTICE：■はのコンテナは位置があることを確認する：相対