Unable to Create CSS Tooltips in Confluence

[Charisma Riley]

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!

[Charisma Riley]

I created a blank page NOT copied from any others in the space and it works just fine. The issue I'm having now is that it cuts off the top or a side depending on how it bumps up against a section area. See here when it's in it's own section below another:

Editor View (spans in separate section)

Preview (spans in separate section)

Editor View (spans in same section)

Preview (spans in same section)

There must be something on those cloned pages that is blocking this functionality. But I'm really not sure what to do about this new issue. Any thoughts?

Thanks in advance, everyone!

[Sattesh M]

Hello Riley,

I just installed the Content formatting tool from Adaptavist to try this, and using your CSS above, it works perfectly for me.

Could you have some other CSS, in that Space's stylesheet, or even the Global stylesheet, that could be interfering with your CSS above?

Do let me know if you have any questions.

Cheers,
Sattesh

[Charisma Riley]

I tried to check, as you suggested, that another stylesheet might be affecting this macro's ability to accept css manipulation. However, I cannot seem to find where the Space and Global stylesheets live? How do I locate these?

[Sattesh M]

Hello @Charisma Riley,

Space stylesheet can be found here,

• (ConfluenceBaseURL)/spaces/viewstylesheet.action?key=<SPACEKEY>
• Replace <SPACEKEY> with Space key.

Global stylesheet can be found here,

• (ConfluenceBaseURL)/admin/viewstylesheet.action

Do check those links to see if there are other stylesheets interfering with yours above.

Cheers,
Sattesh

[Daniel Eads]

Hey Charisma,

Based on the answer to your other question "Customizing Header and Footer by Space?" I think you've found the space and global stylesheets! Is that right?

Were you able to get your nested spans working?

Cheers,
Daniel

[Charisma Riley]

I have not. And I've now determined we are using the default theme which is applied globally. Also, there is no extra formatting in the Global header and footer, nor in the Space header and footer. I'm not really sure what's happening.