html - 如何显示类似于来自 span 元素的对话框消息的弹出窗口

Question

我有以下 HTML:

<div class="total">
  <span id="pledged-money" class="money">
    <p>${{ total.amount }}
      <span class="btn btn-xs btn-info question-mark"
            data-toggle="tooltip"
            data-placement="top"
            title="Hello there">
        !
      </span>
    </p>
  </span>
</div>

使用以下 scss:

#pledged-money {
  p {
    display: block;
    position: relative;
  }
  span {
    position: absolute;
    top: 22%;
    margin-left: 10px ;
    font-size: 0.5em;
    width: 9%;
  }
}

结果我有以下内容:

到目前为止一切正常，但我需要的是在单击此 span 元素时显示一个对话框，如下所示:

我在 HTML 和 CSS 方面没有太多经验，目前我被困在这个问题上。如何显示这个具有关闭按钮的元素和指向 span 元素的对话框。

Answer 1

如果使用bootstrap，实现弹窗消息会非常容易。

使用bootstrap popover，这里是引用链接https://www.w3schools.com/bootstrap/bootstrap_popover.asp