欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何顯示一個類似于span元素的對話框消息的彈出窗口

CSS
錢諍諍2年前9瀏覽0評論

我有下面的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>

使用以下SCS:

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

結果，我得到了以下結果:enter image description here

到目前為止，一切正常，但我需要的是在點擊這個span元素時顯示一個對話框，如下所示:enter image description here

我在HTML和CSS方面沒有太多的經驗，目前我被困在這方面。我如何顯示這個有關閉按鈕和指向span元素的對話框的元素？

如果使用bootstrap，實現彈出消息將非常容易。

使用bootstrap popover，這里是參考https://www.w3schools.com/bootstrap/bootstrap_popover.asp的鏈接