How to create a pop up graphic similar to a hover pop up graphic?

I want to be able to hover/or click a link and have a graphic pop up within the same window/page that I am on.

2 answers

Hey Kevin,

Is this a third party plugin that has those graphic? If yes, you might want to reach out the vendor to see if there's an improvement request that you can fill in to have this feature.


If you're using Confluence server, try this:

  1. Remove the word or phrase that will be the target of the rollover
  2. Add the Rollover macro
  3. Edit the Rollover macro and put something unique in the Class field (e.g. image1)
  4. Put the Span macro in its body
    (The Span macro forces it to be inline) 
  5. Add the CSS Stylesheet macro
  6. Enter the following:

    .image1:before {
    color: blue;
    text-decoration: underline;
    .image1-rollover:after {
  7. Change "rollover" to the word or phrase that will be the target of the rollover (leave in quotes)

  8. Change the url to the actual URL of the image
  9. (Optional) Change or remove the color and text-decoration lines

Where is the Rollover Macro?

Hi, @Milo Grika, just wondering, I'm trying this in the latest confluence, and it's not possible to place the span macro in the rollover macro's body.

I'm well aware how to edit the markup, or even the html to do this, but I need to leave a legacy to the people that come after me that might not be conversant in these methods but can still follow the logical path of the visual elements in the WYSIWYG editor of the modern Confluence Server.

Is there a simple way around this? I'm desperate to replace me CSS rollovers with something Confluence native.

Sorry to bother you on a 3 year old issue.

Sadly, I can't seem to get the trigger to be inline either — something seems to have changed since then (

Thankfully, I don't think I ever actually used the rollover macro anywhere; just as an experiment to answer the question.

Heh. OK, cheers, Milo.

I'm making slow progress with it, but it's moving to the back of what I need to focus on now that I have to focus on content.

(gr. content. ... why can't I just make pretty things?)

If I get a solution I'll try to remember to come back here to put it in these answers ... as I reckon I *can* get a pop up to appear in the middle of the screen with minimal CSS (to pass a new users "WTH is this?" face) and to pass management's approval of that lack of CSS. ;-)

Have a goodn'.

Please do, @Eliot Cole because I also just want to make things pretty and Confluence without having to purchase a bunch of plug-ins!

Unfortunately, Atlassian has made 'having to purchase a bunch of plug-ins' their business model.

OK, a day (month) late and a bit richer (but only in my head) ... but still nothing on this.

I can build this, now, @Melanie Kovach but the URLs do not work ... at all. Has anyone got a fix for that? @Milo Grika /  @Milo Grika, you got any whizzy tips?

Basically reverse the elements, and put the rollover in the span (or indeed anywhere on the page, it really doesn't matter). The span is the important part of this.

Essentially your page should look like:




But the reality of it is that, actually, the css can all be in one block at the top, and your rollover can be anywhere.

So, really, the only thing (to simplify the page) you need to worry about is the span. If you have lots of these, you can then keep all of the CSS together, and all the rollovers together.

Thing is ... it's all pointless, because the URLs don't work, soooooooooooooo ....

Are there any non-alpha-numeric characters? While I do not use the pop-up feature, I have found that most non-alpha-numeric characters do not work as you'd expect them when part of the URL.

Nothing abnormal. I literally created a test page called test and filled out the tutorial from Adaptavist, plus the before/after tags here and they kill the url (google).

It should be stressed that this doesn't create the pop-up that's desired. But it can give a decent mouse-over, so different effect, but ....

Sorry to do this, but @Adaptavist, I'm thinking that (whilst it might not be 'as designed') there's a possible flaw in your Rollover macro (pseudo-elements kill urls), mateys. :(

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Mar 12, 2019 in Confluence

Confluence Admin Certification now $150 for Community Members

More and more people are building their careers with Atlassian, and we want you to be at the front of this wave! Important Dates Start the Certification Prep Course by 2 April 2019 Take your e...

1,050 views 2 13
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you