Question

我尝试过仅限CSS的工具提示。但是，我无法在工具提示的箭头中添加边框。

这是我的代码（请参阅http://jsfiddle.net/1u2kw86m/）：

<a href="#" class="tooltip" title="Automatic resize CSS">Test small Text</a>

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #000;
    text-decoration: none;

}

.tooltip:after {
    background: #ffffe1;
    border-radius: 4px;
    border:1px solid #DCA;
     box-shadow: 5px 5px 8px #ccc;
    bottom: 28px;
    color: #000;
    content: attr(title);
    display: block;
    left: 1em;
    padding:9px 8px 9px 8px;
    position: absolute;
    z-index: 98;
    min-width:200px;
    max-width:500px;
    font: 12px Arial, Helvetica, sans-serif;
    line-height:16px;   
}

.tooltip:before {
    border: solid;
    border-color: rgba(255,255,225,1) transparent;
    border-width: 15px 15px 0px 0px;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;    
}

Answer 1

只有当遗骸被遗骸时，您才会显示:before和:after。

所以

.tooltip:after

变为

.tooltip:hover:after

＆＃13;

.tooltip {
  display: inline;
  position: relative;
}
.tooltip:hover {
  color: #000;
  text-decoration: none;
}
.tooltip:hover:after {
  background: #ffffe1;
  border-radius: 4px;
  border: 1px solid #DCA;
  box-shadow: 5px 5px 8px #ccc;
  bottom: 28px;
  color: #000;
  content: attr(title);
  display: block;
  left: 1em;
  padding: 9px 8px 9px 8px;
  position: absolute;
  z-index: 98;
  min-width: 200px;
  max-width: 500px;
  font: 12px Arial, Helvetica, sans-serif;
  line-height: 16px;
}
.tooltip:hover:before {
  border: solid;
  border-color: rgba(255, 255, 225, 1) transparent;
  border-width: 15px 15px 0px 0px;
  bottom: 1em;
  content: "";
  display: block;
  left: 2em;
  position: absolute;
  z-index: 99;
}

＆＃13;

<p>Tool tip</p>
<br/>
<br/>

</br><a href="#" class="tooltip" title="Automatic resize CSS">Test small Text</a> 
<br/>
<br/>

＆＃13;

http://jsfiddle.net/1u2kw86m/1/

Answer 2

为工具提示添加span，以便您可以更好地设置样式

.tooltip {
  display: inline;
  position: relative;
}
.tooltip:hover {
  color: #000;
  text-decoration: none;
}
.tooltip span {
  background: #ffffe1;
  border-radius: 4px;
  border: 1px solid #DCA;
  box-shadow: 5px 5px 8px #ccc;
  bottom: 28px;
  color: #000;
  content: attr(title);
  display: block;
  left: 1em;
  padding: 9px 8px 9px 8px;
  position: absolute;
  z-index: 98;
  min-width: 200px;
  max-width: 500px;
  font: 12px Arial, Helvetica, sans-serif;
  line-height: 16px;
  display: none;
}
.tooltip span:before {
  border: solid;
  border-color: rgba(255, 255, 225, 1) transparent;
  border-width: 14px 14px 0px 0px;
  bottom: -14px;
  content: "";
  display: block;
  left: 2em;
  position: absolute;
  z-index: 1;
}
.tooltip span:after {
  border: solid;
  border-color: #DCA transparent;
  border-width: 17px 17px 0px 0px;
  content: "";
  display: block;
  left: 23px;
  bottom: -17px;
  position: absolute;
  z-index: -1;
}
.tooltip:hover span {
  display: block;
}

hover on a for the tooltip to appear
<br>
<br>
<br>
<br> <a href="#" class="tooltip">Test small Text<span>Automatic resize CSS</span></a>

仅限CSS工具提示

2 个答案: