Tooltip in css3 with transition effect in hover
Question
I have made a tooltip with HTML 5 & CSS 3 with a hover effect. I have used a transition effect with height on hover. When I used overflow: hidden; the arrow of the tooltip disappears. What could be the problem?
I have tried overflow: visible; on hover and tooltiptext::after . But the arrow remains disappeared.
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { height: 0px; visibility: hidden; overflow: hidden; width: 100px; background-color: #ffff; color: black; text-align: center; border-radius: 6px; padding: 5px 10px; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px; transition: height 2s; } .tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 7px; border-style: solid; border-color: transparent transparent black transparent; } .tooltip:hover .tooltiptext { visibility: visible; height: 55px; border: 1px solid black; }
<h2>Bottom Tooltip w/ Top Arrow</h2> <div class="tooltip">Hover over me <span class="tooltiptext">Click to go to our main course page</span> </div>
The tooltip should slidedown with arrow but with overflow: hidden property the tip disappear.
3 answers
solution1
0 2019-06-11 10:00:58
<!DOCTYPE html> <html> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { height: 0px; visibility: hidden; overflow: hidden; width: 100px; background-color: #ffff; color: black; text-align: center; border-radius: 6px; padding: 5px 10px; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px; transition: height 2s; } .arrow{ position:relative; } .arrow::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 7px; border-style: solid; border-color: transparent transparent black transparent; opacity:0; } .tooltip:hover .tooltiptext { visibility: visible; height: 55px; border: 1px solid black; } .tooltip:hover .arrow::after{ opacity:1; } </style> <body style="text-align:center;"> <h2>Bottom Tooltip w/ Top Arrow</h2> <div class="tooltip">Hover over me <div class="arrow"> <span class="tooltiptext">Click to go to our main course page</span> </div> </div> </body> </html>
i wrapped the content in a div and applied after to this div !
solution2
0 2019-06-11 10:03:57
The problem is your use of visibility property. just remove that from both both places you've defined it and your example will work. visibility cannot be animated. try opacity instead if you need to
solution3
0 2019-06-11 10:04:26
One idea is to consider the arrow inside the height of the tooltiptext . To do this you can create the border using the other pseudo element then add more padding-top for the arrow:
body { text-align:center; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { height: 0px; overflow: hidden; visibility:hidden; width: 100px; color: black; text-align: center; padding: 15px 10px 5px; /*Increase the padding-top*/ position: absolute; z-index: 1; top: 100%; left: calc(50% - 60px); transition: height 2s,visibility 0s 1.5s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 0; left: calc(50% - 5px); border: 7px solid; border-color: transparent transparent black transparent; z-index:-1; } /* to create the border */ .tooltip .tooltiptext::before { content: ""; position: absolute; top: 14px; /* we offset the top by the arrow height*/ left: 0; right:0; bottom:0; border: 1px solid; border-radius: 6px; background:#fff; z-index:-1; } /**/ .tooltip:hover .tooltiptext { visibility: visible; height: 55px; transition: height 2s,visibility 0s 0s; }
<h2>Bottom Tooltip w/ Top Arrow</h2> <div class="tooltip">Hover over me <span class="tooltiptext">Click to go to our main course page</span> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.