如何在默认情况下显示工具提示而不将鼠标悬停在纯CSS中

Question

我有以下工具提示，当我们悬停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> 

Answer 1

您只需要在工具提示类本身上将opacity从0更改为1 ，因为将其设置为0是使其不可见的原因。

.toolwrapper .tooltip {
    opacity: 1;
}

Answer 2

在工具提示中添加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>