ppowell777
Coder
I am tasked with displaying Tooltips, my absolute first time in my xx years of programming, and I am unable to display them using "hover". Though the cursor changes as expected, the tooltip remains hidden upon hovering. I honestly don't know why. This is mainly for MS Edge though should, in theory, work as well for Firefox and Chrome (not a work requirement). I wrote a sample HTML page that fails:
Help appreciated. I have looked online and found nothing that helped me understand my problem.
Thanks
HTML:
<html>
<head>
<title>asdf</title>
<style>
.tooltip-icon-style {
color: #ffffff;
background-color: #000000;
font-weight: bold;
font-family: Arial;
font-size: 18px;
margin: 10px;
border-radius: 50%;
}
.tooltip-icon-style .tooltip {
visibility: hidden;
width: 120px;
background-color: #eeeeee;
color: #000000;
font-family: Arial;
font-size: 10pt !important;
font-weight: normal !important;
text-align: center;
border-radius: 6px;
padding: 10px 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-icon-style:hover {
cursor: help;
text-decoration: underline dotted;
}
.tooltip-icon-style:hover .tooltip {
visibility: visible;
opacity: 1;
}
.tooltip-icon-style .tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
</style>
</head>
<body>
<span class="tooltip-icon-style"> ? <span class="tooltip">Here is my tooltip!</span></span>
</body>
</html>Help appreciated. I have looked online and found nothing that helped me understand my problem.
Thanks
