带箭头的纯 CSS 工具提示

Question

我有这个：

span {
    padding: 10px;
    display: inline;
}

[title]:hover::before {
    background: #333;
    top: 20%;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    color: #fff;
    content: attr(title);
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: auto;
}

<span class="dijitButtonContents" id="saveButton" title="Save as draft"><span id="saveButton_label">Save</span></span>

我需要像这样添加一个指向箭头：

任何人都可以帮助我仅使用伪元素来实现吗？

谢谢。

Answer 1

像这样？

span {
  padding: 10px;
  display: inline;
}

[title] {
  position: relative;
}

[title]:hover:before {
  background: #333;
  top: 100%;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  color: #fff;
  content: attr(title);
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: auto;
  margin-top: 10px;
}

[title]:hover:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #333;
  content: ' ';
  position: absolute;
  top: 100%;
  left: 50%;
}

<span class="dijitButtonContents" id="saveButton" title="Save as draft"><span id="saveButton_label">Save</span></span>

Answer 2

我使用 CSS 三角形生成器来创建箭头。

编辑： 为居中对齐添加了 CSS。还在 CSS 中提供了解释每个值的注释。

添加 :hover 伪选择器以仅在悬停时显示工具提示。我删除了它们以便于开发。

.center-align {
  text-align: center;
}
[title] {
  position: relative;
}
[title]:before,
[title]:after {
  z-index: 98;
}

[title]:before {
  bottom: -10px;
  /* calculate 50% width of the parent element minus width of the current element */
  left: calc(50% - 10px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #333 transparent;
  content: "";
  position: absolute;
  display: block;
}

[title]:after {
  background: #333;
  /* calculate single line height plus height of the arrow element */
  top: calc(1em + 10px);
  border-radius: 5px;
  color: #fff;
  content: attr(title);
  padding: 5px 10px;
  position: absolute;
  /* calculate 50% width of the parent minus half of the width of current element minus half of the padding */
  left: calc(50% - 45px - 5px); 
  /* requires fixed width for calculation above */
  width: 90px;
  text-align: center;
}

<span class="dijitButtonContents" id="saveButton" title="Save as draft">  
  <span id="saveButton_label">Save and write a long description</span>
</span>
<br/><br/><br/><br/>
<span class="dijitButtonContents" id="saveButton" title="Save as draft">  
  <span id="saveButton_label">Save</span>
</span>

<div class="center-align">
  <span class="dijitButtonContents" id="saveButton" title="Save as draft">  
  <span id="saveButton_label">Save and write a long description</span>
  </span>
  <br/><br/><br/><br/>
  <span class="dijitButtonContents" id="saveButton" title="Save as draft">  
  <span id="saveButton_label">Save</span>
  </span>
</div>

带箭头的纯 CSS 工具提示

Pure CSS Tooltip with arrow

css

tooltip