我正在尝试在工具提示上添加边框,以使其整体上遵循工具提示的外线。现在,我设法仅在工具提示的上部添加边框,该边框与箭头部分相交,而这不是我想要的。
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。
答案 0 :(得分:2)
由于要为三角形块创建边框,因此要为其创建单独的元素,然后使用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>