I have a tooltip that is set to appear when we hover over the div element,
Is there a way to display the tooltip automatically when the page is refreshed without using Javascript? I am looking for a solution in pure CSS only.
I attempted to remove display: block; from tooltip:before but it did not work.
.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>