javascript - 标题的自定义工具提示 CSS 问题

Question

我已经使用 CSS 创建了一个工具提示，但我无法实现的是将工具提示的头部保持在中心位置。因此，如果您注意到它在工具提示中显示 £30.00。如果您在工具提示中写入 £300.00 或增加字数，则工具提示的头部不会停留在中心。

有人能帮忙吗？

.tooltip-card {
  display: inline-block;
  position: relative;
  border: 1px solid #777777;
  background: #FFF;
  text-decoration: none;
  border-radius: 2px;
  padding: 5px 10px;
  margin-top: 50px;
  margin-bottom: 40px;
}

.tooltip-card-text:before {
  content: '';
  display: block;  
  position: absolute;
  left: 31%;
  bottom: 100%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: black;
}

.tooltip-card-text:after {
  content: '';
  display: block;  
  position: absolute;
  left: 32%;
  bottom: 100%;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-bottom-color: white;
}

.search-bolt-icon-map {
  color: #02b875;
  margin-right: 5px;
}

<div class="tooltip-card">
<div href="#" class="tooltip-card-text"><i class="fa fa-bolt search-bolt-icon-map"></i>£30.00</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">

Answer 1

问题在于 31% 和 32% 是特定的，并且取决于元素的当前宽度。相反，将三 Angular 形居中 left: 50;转换:translateX(-50%);:

.tooltip-card {
  display: inline-block;
  position: relative;
  border: 1px solid #777777;
  background: #FFF;
  text-decoration: none;
  border-radius: 2px;
  padding: 5px 10px;
  margin-top: 50px;
  margin-bottom: 40px;
}

.tooltip-card-text:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: black;
}

.tooltip-card-text:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-bottom-color: white;
}

.search-bolt-icon-map {
  color: #02b875;
  margin-right: 5px;
}

<div class="tooltip-card">
  <div href="#" class="tooltip-card-text">
    <i class="fa fa-bolt search-bolt-icon-map"></i> £30000000.00
  </div>
</div>

<div class="tooltip-card">
  <div href="#" class="tooltip-card-text">
    <i class="fa fa-bolt search-bolt-icon-map"></i> £3000.00
  </div>
</div>

<div class="tooltip-card">
  <div href="#" class="tooltip-card-text">
    <i class="fa fa-bolt search-bolt-icon-map"></i> £30.00
  </div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">