我有以下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元素的对话框的元素。