我有以下工具提示,当我们将div元素悬停时,该提示会起作用
默认情况下,刷新页面时我需要显示工具提示。
如何在纯CSS中实现它?我在这里不需要任何JavaScript内容。有什么想法让它只能使用CSS吗?
我尝试从display: block;
中删除tooltip:before
,但没有一个起作用。
.toolwrapper {
color: #555;
cursor: help;
font-family: Arial;
font-size: 12px;
margin: 40px 64px 9px 4px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 100%;
}
.toolwrapper .tooltip {
background: #424242;
bottom: 100%;
color: #fff;
display: block;
left: 0;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.toolwrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.toolwrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #424242 10px;
bottom: -10px;
content: " ";
height: 0;
left: 80%;
margin-left: -13px;
position: absolute;
width: 0;
}
.toolwrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
<div class="toolwrapper">
Hover me to show tooltip
<div class="tooltip">Hi I'm tooltip</div>
</div>
答案 0 :(得分:2)
您只需要在工具提示类本身上将opacity
从0
更改为1
,因为将其设置为0会使它不可见。
.toolwrapper .tooltip {
opacity: 1;
}
答案 1 :(得分:1)
在工具提示中添加opacity: 1
.toolwrapper {
color: #555;
cursor: help;
font-family: Arial;
font-size: 12px;
margin: 40px 64px 9px 4px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 100%;
}
.toolwrapper .tooltip {
background: #424242;
bottom: 100%;
color: #fff;
display: block;
left: 0;
opacity: 1 !important;
padding: 10px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.toolwrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.toolwrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #424242 10px;
bottom: -10px;
content: " ";
height: 0;
left: 80%;
margin-left: -13px;
position: absolute;
width: 0;
}
.toolwrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
<div class="toolwrapper">
Hover me to show tooltip
<div class="tooltip">Hi I'm tooltip</div>
</div>