html - 整体给tooltip添加边框

Question

我正在尝试向工具提示添加边框，以便它作为一个整体遵循工具提示的外线。现在我设法只在工具提示的上部添加边框，它与箭头部分相交，这不是我想要的。

HTML:

<p>Spam</p>
<p>Eggs</p>
<div data-tip="E-mail is only for registration">
    <input type="text" name="test" value="44"/>
</div>

CSS:

[data-tip] {
    position: relative;

}

[data-tip]:before {
    content: '';
    display: none;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid black;
    position: absolute;
    top: -10px;
    left: 15px;
    z-index: 8;
    font-size: 1em;
    line-height: 2em;
    width: 0;
    height: 0;
}

[data-tip]:after {
    display: none;
    content: attr(data-tip);
    position: absolute;
    top: -54px;
    left: 0px;
    border: 1px solid red;
    padding: 10px 20px;
    background-color: black;
    color: white;
    z-index: 9;
    font-size: 0.75em;
    height: 4em;
    text-align: center;
    vertical-align: middle;
    line-height: 2em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: normal;
}

[data-tip]:hover:before,
[data-tip]:hover:after {
    display:block;
}

这是 jsfiddle link .

Answer 1

因为你想为三 Angular 形 block 创建一个边框，为它创建一个单独的元素，并使用 z-indexing 隐藏主要数据提示元素的边框:

[data-tip] {
  position: relative;
}

[data-tip] .triangle {
  display: none;
}

[data-tip] .triangle:after {
  content: '';
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid black;
  position: absolute;
  top: -10px;
  left: 15px;
  z-index: 1;
}

[data-tip] .triangle:before {
  content: '';
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid red;
  position: absolute;
  top: -7px;
  left: 15px;
  z-index: 1;
}

[data-tip]:after {
  display: none;
  content: attr(data-tip);
  position: absolute;
  top: -54px;
  left: 0px;
  border: 2px solid red;
  padding: 10px 20px;
  background-color: black;
  color: white;
  z-index: 0;
  font-size: 0.75em;
  height: 4em;
  text-align: center;
  vertical-align: middle;
  line-height: 2em;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  box-sizing: border-box;
  white-space: nowrap;
  word-wrap: normal;
}

[data-tip]:hover:before,
[data-tip]:hover:after,
[data-tip]:hover .triangle {
  display: block;
}

<p>Spam</p>
<p>Eggs</p>
<div data-tip="E-mail is only for registration">
  <div class="triangle"></div>
  <input type="text" name="test" value="44" />
</div>