如何才能在發生點擊事件的位置彈出提示框？

Question

我使用離子來開發應用程序。現在，我想在發生點擊事件的地方彈出一個工具提示。就像下面的圖片所示。我只想讓三角形出現在我點擊的地方。

任何想法是表示讚賞。 THX

Answer 1

你可以用JS，CSS的一小組合，和HTML

var button = document.getElementById('test-button'); 
 

 
button.onclick = function(e) { 
 
    var buttonPosition = this.getBoundingClientRect(), 
 
    bodyRect = document.body.getBoundingClientRect(), 
 
    popup = document.createElement('div'), 
 
    coords = { 
 
     pageX: buttonPosition.left + (buttonPosition.width/2), 
 
     pageY: (buttonPosition.top - bodyRect.top) + (buttonPosition.height/2) 
 
    }; 
 

 
    popup.classList.add('popup'); 
 
    document.body.appendChild(popup); 
 
    popup.style.left = coords.pageX + 'px'; 
 
    popup.style.top = coords.pageY + 'px'; 
 
}

button { 
 
    margin-left: 200px; 
 
} 
 

 
.popup { 
 
    position: absolute; 
 
    z-index: 10; 
 
    height: 80px; 
 
    background: #fff; 
 
    width: 150px; 
 
    transform: translate(-50%, 30px); 
 
    box-shadow: 0 1px 3px 0 #666 
 
} 
 

 
.popup:before, 
 
.popup:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-bottom: 10px solid #ccc; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: -1px; 
 
    transform: translate(-50%, -100%); 
 
} 
 

 
.popup:after { 
 
    top: 0; 
 
    border-bottom: 10px solid #fff; 
 
}

<button type="button" id="test-button">Test</button>