如何在Click事件发生的确切位置获得弹出的工具提示？

Question

我正在使用ionic来开发应用程序。现在，我想在click事件发生的位置弹出一个工具提示。如下图所示。我只想在我点击的地方出现三角形。

任何想法都表示赞赏。 THX

Answer 1

您可以通过JS，CSS和HTML的小组合来实现这一目标

＆＃13;

＆＃13;

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';
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;