Simple CSS Popup with Attribute Value on Hover

[dsmith1690]

I want to create a simple CSS popup that displays an attribute value. What I have already is this:

row[props]:hover {
color: #ff8000;
content: "props='"attr(props)"'";
}

This works but there are two things about it I'd like to modify if possible. So far I'm unable to figure out if they are possible:

1. The popup takes too long to display. I'd like to speed up the time it takes to display
2. The popup covers some of the content of the element. I'd like to move it above (or below)

Is there any way to modify the timing of the display or it's location? All my attempts to use standard CSS animation or transition features have not worked.

[Radu]

Hi,

Are you using the Oxygen standaline installation or the Oxygen WebAuthor in-browser editing tool?

Regards,
Radu

[dsmith1690]

The solution is intended to be used in Web Author but I don't have access to that on this project and so am working in Desktop.

[cristi_talau]

Hello,

The :hover selector in Web Author can just change CSS styles of elements that are already handled. So you should do something like:

Code: Select all

row[props]:after {
  content: "props='"attr(props)"'";
  visibility: hidden;
}
row[props]:hover:after {
  visibility: visible;
}

I think that the rendering is slow because the layout of the table has to be re-computed. One way to avoid this is to use position: relative on the row and position absolute on the ":after" pseudo-element.

Table handling is a bit different in Web Author than in the Oxygen XML Editor, so minor details could change. You can test your changes using the Web Author Test Server Add-on for Oxygen XML Editor [1].

Best,
Cristian

[https://www.oxygenxml.com/doc/versions/ ... g_the_weba]

[dsmith1690]

Hi Cristian,

Thanks very much. Please confirm that this rule:

row[props]:after {
visibility: visible;
}

Should instead use the :hover pseudo-class:

row[props]:hover {
visibility: visible;
}

Or did you intend both to use ":after"?

Don

[cristi_talau]

Hello,

Sorry for the mistake. The second one is :hover:after. The idea is that the text is there always but invisible. When the row is hovered, it becomes visible. I used ":after" to make room for more layout options. If you use the content property of the row itself you cannot give it position absolute for example.

Best,
Cristian