Page 1 of 1
Simple CSS Popup with Attribute Value on Hover
Posted: Wed Sep 23, 2020 1:50 am
by 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.
Re: Simple CSS Popup with Attribute Value on Hover
Posted: Wed Sep 23, 2020 6:48 am
by Radu
Hi,
Are you using the Oxygen standaline installation or the Oxygen WebAuthor in-browser editing tool?
Regards,
Radu
Re: Simple CSS Popup with Attribute Value on Hover
Posted: Wed Sep 23, 2020 2:59 pm
by 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.
Re: Simple CSS Popup with Attribute Value on Hover
Posted: Wed Sep 23, 2020 3:45 pm
by 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]
Re: Simple CSS Popup with Attribute Value on Hover
Posted: Wed Sep 23, 2020 4:19 pm
by 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
Re: Simple CSS Popup with Attribute Value on Hover
Posted: Wed Sep 23, 2020 5:16 pm
by 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