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％是特定的，并且依赖于元素的当前宽度。而是将三角形居中放置left: 50; transform: 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">

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

1 个答案: