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

[Kevin Shanahan]

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.

[Milo Test]

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 {
   content:"rollover";
   color: blue;
   text-decoration: underline;
   }
   .image1-rollover:after {
   content:url(http://path.to.image/image.jpg);
   }

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

[Casey Maynard]

Where is the Rollover Macro?

[Eliot Cole]

Hi, @Milo Test, 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.

[Milo Grika]

Sadly, I can't seem to get the trigger to be inline either — something seems to have changed since then (https://jira.atlassian.com/browse/CONFCLOUD-53073).

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

[Eliot Cole]

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'.

[Melanie Kovach]

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

[Casey Maynard]

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

[Eliot Cole]

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 Test, 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:

<span>

<rollover>

<css>

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 ....

[Casey Maynard]

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.

[Eliot Cole]

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 ....

[Eliot Cole]

Sorry to do this, but @A, 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. :(

[William Zanchet [Atlassian]]

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.

Cheers,
WZ