So I have created a Span macro inside a Span macro in order to define a tooltip around a few words in my Confluence page. This is an example of what I've done:
And from what I understand, this should be the equivalent to:
<span class="tooltip">oak birdhouses
<span class="tooltiptext">Oak birdhouses require different equipment.</span>
</span>
The CSS I used in a Style macro at the top of the page is pretty simple:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}However, it results in this:
I am actually hovering my cursor over the words "oak birdhouse" in the image above, but no tooltip appears. What I expect to see is this:
If anyone has any advice, I'd appreciate it. Right now, I'm kind of banging my head against a wall as to why this isn't working. Thanks in advance!
