Unable to Create CSS Tooltips in Confluence
Asked by 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:

![Confluence tooltip SPAN SPAN.png](/t5/image/serverpage/image-id/32264iE693D146557CCC25/image-dimensions/530x262?v=v2 "Confluence tooltip SPAN SPAN.png")

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:

![Confluence tooltip CSS1 Result.png](https://community.atlassian.com/t5/image/serverpage/image-id/32267iF11BA9476271AD52/image-dimensions/535x126?v=v2 "Confluence tooltip CSS1 Result.png")

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:

![Confluence tooltip CSS1 Should Be.png](/t5/image/serverpage/image-id/32266iD1AB21AD5BF1BD22/image-dimensions/539x101?v=v2 "Confluence tooltip CSS1 Should Be.png")

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!


Answers:
author: Charisma Riley
body: 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)**

![Confluence Tooltip CSS Editor1.png](https://community.atlassian.com/t5/image/serverpage/image-id/32658i68293CBC4FF33BC3/image-dimensions/462x356?v=v2 "Confluence Tooltip CSS Editor1.png")

**Preview (spans in separate section)**

**![Confluence Tooltip CSS Result2.png](https://community.atlassian.com/t5/image/serverpage/image-id/32660i4309805388655BB5/image-dimensions/459x242?v=v2 "Confluence Tooltip CSS Result2.png")**

**Editor View (spans in same section)**

**![Confluence Tooltip CSS Editor3.png](https://community.atlassian.com/t5/image/serverpage/image-id/32661i57DAB2C6E40BD7AE/image-dimensions/460x353?v=v2 "Confluence Tooltip CSS Editor3.png")**

**Preview (spans in same section)**

**![Confluence Tooltip CSS Result3.png](https://community.atlassian.com/t5/image/serverpage/image-id/32662i50A5C949FA58B2F0/image-dimensions/458x241?v=v2 "Confluence Tooltip CSS Result3.png")**

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!


author: Sattesh M
body: Hello Riley,

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

![span.png](https://community.atlassian.com/t5/image/serverpage/image-id/32285iF82B6E899E03882E/image-dimensions/289x113?v=v2 "span.png")

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

comments: author: Charisma Riley
body: 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?


author: Sattesh M
body: Hello [@Charisma Riley](/t5/user/viewprofilepage/user-id/1901166),

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


author: Daniel Eads
body: Hey Charisma,

Based on the answer to your other question "[Customizing Header and Footer by Space?](https://community.atlassian.com/t5/Confluence-questions/Customizing-Header-and-Footer-by-Space/qaq-p/892195)" I think you've found the space and global stylesheets! Is that right?

Were you able to get your nested spans working?

Cheers,  
Daniel


author: Charisma Riley
body: 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.


Tags: atl-adm

cloud

confluence-cloud

css

tool-tip