如何显示类似于来自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