Question on html/css issue for The One Ring character sheet

Hello, I'm trying to improve a character sheet (The One Ring / L'Anneau Unique (french)" by adding hover tips that would be displayed when the player move his mouse over some character sheets fields. For example, a mouse over a Competence field would display a short definition of that competence. That hover functionality implementation was already done in the existing character sheet but it's not working fine : - it works on some fields but not on some others (the tip is displayed for some fields but not for others) - there is a "transition display" property that allows to have the tips displayed after time (for example : after 3 seconds) rather than immediately. The default value in the character sheet is "display 0s" (so it appears immediatement when the mouse is over) but it keeps going immediatly even if i put values like "display 3s". That property never works whatever i do. HTML File : <a href="https://github.com/Roll20/roll20-character-sheets" rel="nofollow">https://github.com/Roll20/roll20-character-sheets</a>... - Working fine (for displaying the tip when the mouse is over) &lt;label&gt;Corps&lt;/label&gt; &lt;div class="sheet-hover-info"&gt;&Agrave; compléter&lt;/div&gt; - Not working fine (not displaying the tip when the mouse is over) &lt;label&gt;Présence&lt;/label&gt; &lt;div class="sheet-hover-info"&gt;&Agrave; compléter&lt;/div&gt; Note : This "Présence" label is also modified by other css code in order to have it underlined when click-on. I believe this is the mix of the several css lines that don't fit together but i'm not good enough in css to find the solution by myself. CSS File : <a href="https://github.com/Roll20/roll20-character-sheets" rel="nofollow">https://github.com/Roll20/roll20-character-sheets</a>... I see the following css code that is used : .sheet-hover-info { position: absolute; background: white; z-index: 10; padding: 20px; width: 200px; display: none; opacity: 0; box-shadow: 0 3px 15px rgba(0,0,0,.1); transition: display 0s ease-in-out, opacity 1s ease-in-out 2s; } label:hover + .sheet-hover-info { display: block; opacity: 1; transition: display 0s ease-in-out, opacity 1s ease-in-out 2s; } Note : there is more css code that might be relevant to that hover functionality. Thanks in advance for your advices.

Alright, this is the reason it does not work (I found it through the inspect tool in Chrome): The code around the Présence label looks like this: &lt;input type="checkbox" name="attr_awe_favoured" value="1"&gt; &lt;label&gt;Présence&lt;/label&gt; &lt;div class="sheet-hover-info"&gt;À compléter&lt;/div&gt; Now, the input is set to have position: absolute and so is actually displayed on top of the label. I.e. when you think you're hovering over the label, you are actually hovering over the input, so the CSS for hover never triggers. You can try adding this CSS (by the way, including the same transition property in the :hover CSS again is pointless): input:hover + label + .sheet-hover-info { display: block; opacity: 1; } About transitions:&nbsp; One reason animation doesn't work as expected is for sure that the display property is not animatable. The only thing that has a chance of animating is the opacity property. And it seems that animations don't work when they start from display:none, even though opacity is animatable in principle. But I'm not an expert in this.

Thanks a lot Jacob for your explanation about the reason of this issue and with your css code it's working fine. Now I have only the transition to correct (if it is possible).&nbsp;

Concerning the transition for display of hover tips, I have not yet found the final solution but it's better with : .sheet-hover-info { &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; background: white; &nbsp; &nbsp; z-index: 10; &nbsp; &nbsp; padding: 5px; &nbsp; &nbsp; width: 200px; &nbsp; &nbsp; /*display: none;*/ ==&gt; put in comment to desactivate &nbsp; &nbsp; overflow: hidden; ==&gt; add that line &nbsp; &nbsp; opacity: 0; &nbsp; &nbsp; box-shadow: 0 3px 15px rgba(0,0,0,1); &nbsp; &nbsp; transition: display 0s ease-in-out, opacity 1s ease-in-out 2s; &nbsp; &nbsp; transition: hidden 0s ease-in-out, opacity 0s ease-in-out 0s; ==&gt; add that line for the quick undisplay of the hover tips } input:hover + label + .sheet-hover-info { &nbsp; display: block; &nbsp; opacity: 1; &nbsp; transition: display 0s ease-in-out, opacity 1s ease-in-out 2s; ==&gt; add that line } With those modifications, now i have a hover tips displaying after a few seconds of mouse pointer of main attributes (Corps, Coeur, Esprit) and hiding immediatly after moving the mouse outside. And it's working also on the competences labels "Présence", "Inspiration" and "Persuasion" but not on the competences labels of next lines. When i compare the html code for the 1st competences line and the next ones, i don't see any difference. No idea so far but looking for. Any idea is welcome :-)

(EDIT) I understand why only the 1st line of competences is working : the hidden tips isn't displayed but still is in front of the field below and get the focus of mouse. I tried to work with transition on height but i didn't find the right way.