[Splittermond] Showing simple tool tip via auto-calculated field

Hi, I'm trying to show a simple tool tip on the sheet using the "title" attribute of a given input field inside a repeating section and an auto-calculated field, like so: <fieldset class="repeating_abilities">       ... <input type="hidden" name="attr_abilitydescription"> <input type="text" name="attr_abilityname" title="@{abilitydescription}">       ... </fieldset> According to  this answer in another thread by Chris D. this should work. So I guess there is something wrong with the code, because it only shows me this: What am I doing wrong? Can anyone help? Cheers!

I tried some things on my own in this case, e.g. using parenthesis and doubled curly brackets,  but it just won't work. If nobody can help me - do you know another way to show tooltips for inline elements in the character sheet? Greetings!

I think you've misunderstood Chris's tip. Anything you put in title will not be processed in any way, and will be displayed exactly as you have typed it. If you want to show an ability description there, you have to type it into the title tag. Chris's tip is for people who want to show attribute calls, like @{strength} or @{height}. This is because lots of players want to know what the attribute is called, so they can use it macros. This is a quick way to show users what their attributes are called, so they dont have to dig into the html to find it.

There are other ways to show hover text, using the on:hover &nbsp;CSS. This thread describes the technique:&nbsp; <a href="https://app.roll20.net/forum/post/2309276/slug%7D" rel="nofollow">https://app.roll20.net/forum/post/2309276/slug%7D</a>

Hi GiGs, thank you for your reply! I checked the link in the mentioned thread and adapted the code while I replaced the "?" with an input field: &lt;span class="sheet-tooltip"&gt;&lt;input type="text" name="attr_abilityname"&gt;&lt;span&gt;&lt;strong&gt;Most Light-weight Tooltip&lt;/strong&gt;&lt;br&gt;This is the easy-to-use Tooltip driven purely by CSS.&lt;/span&gt;&lt;/span&gt; And this works just fine. But the descriptions of the abilities are loaded during the XML import of the character, so I need a way to render the dynamically created content (such as a description being written into an input field) into the tooltip text. In the current state the tooltip is static, but it has to be dynamic (it should be changed when the field abilityname is changed). How do I achieve this? Greetings!

Unfortunately, there's no way to make tooltip text dynamic in roll20. Roll20 has more limitations in its html than other sites, due to its security model and the needs of managing character sheets, so some things are just not possible here. Edit: actually there might be. You can include an input or a textarea in a hovertext popup. textareas can be given names, and include the attribute text, so you might be able to do it that way.

So, I just have to use the name of the textarea in curly brackets as a placeholder where the static tooltip text now is? Could you provide a small example or a hint how to use the textarea in this way? Cheers!

No you'd have to put the actual text area inside the tooltip area, like &lt;span class="sheet-tooltip"&gt;Description&lt;textarea name="attr_abilitydescription" readonly&gt;Some text&lt;/textarea&gt;&lt;/span&gt; The span here contains the text Description and the textarea. In the CSS I swapped the reference to the inner span to textarea, like so .sheet-tooltip { outline: none; cursor: help; } .sheet-tooltip strong { line-height: 30px; } .sheet-tooltip:hover textarea { display: block; position: absolute; } .sheet-tooltip:hover { text-decoration: none; } .sheet-tooltip textarea { display: none; border-radius: 4px; box-shadow: 5px 5px 8px #ccc; z-index: 10; padding: 14px 20px; margin-top: -30px; margin-left: 28px; width: 300px; line-height: 16px; color: #111; border: 1px solid #dca; background: #fffaf0; } Notice the two textareas in the above CSS were originally span. Then when you over over the word description, you get the text area displayed.&nbsp; At least you do in the jsfiddle, I havent tried this in roll20 yet.

Hi GiGs, it works - thank you very much! Greetings

You're welcome. I learned something new, too and will probably use this technique myself :)

I have a follow-up question: I want that the player can disable the tooltips in the setting menu of the character sheet. My approach is to place a checkbox that sets the textarea to display: none. But the textarea is inside a repeating row (because the player can add as many abilities as he wants and every single one has it's own description). I know that I can make divs appear and disappear with something like this: input.sheet-tab29:checked ~ div.sheet-section-npc { // specify the attributs of the div } But how can I achieve that every textarea-element in the repeating section becomes invisible, if it is possible at all? Greetings!

You'll need to include a hidden copy of the attribute in the repeating section, with the same class, just before the section to be made display:none It's hard to be more specific without seeing the html for the repeating section, and for the checkbox that sets this.

Hi again. The checkbox looks like this: &lt;input type="checkbox" class="sheet-toggletooltips"&gt; The repeating section looks like this: &lt;fieldset class="repeating_masterytooltips"&gt; &lt;input type=text name="attr_masterytooltipname"&gt; &lt;input type=text name="attr_masterytooltiptext"&gt; &lt;/fieldset&gt; So if I got your point, you suggest to add a copy of that checkbox inside the repeating section so that every row has it's own checkbox? Cheers!

You wouldnt add it as a checkbox, but a hidden attribute, like so &lt;fieldset class="repeating_masterytooltips"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="hidden" class="sheet-toggletooltips"&gt; &lt;input type="text" name="attr_masterytooltipname"&gt; &lt;input type="text" class="tooltip" name="attr_masterytooltiptext"&gt; &lt;/fieldset&gt; The user cant see it, and it takes the value from the checkbox version, so the CSS rule works.&nbsp; You'd also need to add a class to the toolup object (I'm guessing its the input, though that doesn't match the code from earlier). It would be something like input.sheet-toggletooltips:checked ~ div.sheet-tooltip { // specify the attributs of the div }

I'm sorry, I posted the wrong repeating section.I've implemented the following: &lt;input type="checkbox" class="sheet-toggletooltips"&gt;Activate tooltips?&lt;/input&gt; &lt;fieldset class="repeating_masteries"&gt; &lt;input type="hidden" class="sheet-toggletooltips"&gt;Activate tooltips?&lt;/input&gt; &lt;input type="text" name="attr_masteryname"&gt; &lt;select name="attr_masteryclass"&gt; &lt;option&gt;...&lt;/option&gt; &lt;/select&gt; &lt;input type="number" name="attr_masterythreshold"&gt; &lt;span class="sheet-tooltip"&gt;&lt;input type="text" name="attr_masteryshortdescription"&gt;&lt;span&gt;&lt;textarea name="attr_masterydescription" class="sheet-toggletextarea" readonly&gt;&lt;/textarea&gt;&lt;/span&gt;&lt;/span&gt; &lt;/fieldset&gt; I haven't implemented any CSS to make this work yet but I'd expect that toggletooltips shows some value when I click on the checkbox, but it doesn't (for testing&nbsp; purposes I made the input field visible). Regarding the CSS: The example CSS displays a &lt;div&gt; container but in this case I want to make a textarea element invisible. Should the textarea elements also get the same CSS class? Maybe something like that? input.sheet-toggletooltips:checked ~ .sheet-toggletextarea { display: none; }

It looks like you;ve copied the version from the original, not the version i posted above. The version i posted above looks better, at least i tdid when i tested them both. Basically you remove the extra span, like so. &lt;fieldset class="repeating_masteries"&gt; &lt;input type="hidden" class="sheet-toggletooltips"/&gt; &lt;input type="text" name="attr_masteryname"/&gt; &lt;select name="attr_masteryclass"&gt; &lt;option&gt;...&lt;/option&gt; &lt;/select&gt; &lt;input type="number" name="attr_masterythreshold"&gt; &lt;span class="sheet-tooltip"&gt;&lt;input type="text" name="attr_masteryshortdescription"/&gt;&lt;textarea name="attr_masterydescription" class="sheet-toggletextarea" readonly&gt;&lt;/textarea&gt;&lt;/span&gt; &lt;/fieldset&gt; The hidden input doesnt need any text, because it is hidden. And inputs are self closing so i added a / at the end of each to satisfy that. Yes, the css you posted i think should work input.sheet-toggletooltips:checked ~ .sheet-toggletextarea { display: none; }

Hi again! The tooltips are working perfectly, but the checkbox to hide them actually doesn't work. Aside the CSS I can't even get the input fields inside the repeating section to automatically take the value of the checkbox although they share the same class: &lt;input type="checkbox" class="sheet-toggletooltips"&gt; &lt;b&gt;Activate toolips?&lt;/b&gt;&lt;/input&gt; &lt;fieldset class="repeating_masteries"&gt; &lt;input type="text" class="sheet-toggletooltips"&gt; &lt;input type="text" name="attr_masteryname"&gt; &lt;select name="attr_masteryability"&gt; [...] &lt;/select&gt; &lt;input type="number" name="attr_masterythreshold" min=0 max=4&gt; &lt;span class="sheet-tooltip"&gt;&lt;input type="text" name="attr_masteryshortdescription"/&gt;&lt;textarea name="attr_masterydescription" class="sheet-toggletextarea" readonly&gt;&lt;/textarea&gt;&lt;/span&gt; &lt;/fieldset&gt; Now if I activate / deactivate the checkbox nothing is happening to the input fields inside the repeating section. As I understood they should switch their values ( I tested both, type=text and type=number ). So, I'm wondering what's wrong with this code. Can anyone help? Cheers!

If you have the checkbox outside the section, you'll need to give it a value and use value, not checked, to set whether its visible or not. Also, your checkbox innput doesnt have a name, nor does the one inside the fieldset. &lt;input type="checkbox" class="sheet-toggletooltips" name="attr_tooltips" value="1"&gt; &lt;b&gt;Activate toolips?&lt;/b&gt;&lt;/input&gt; &lt;fieldset class="repeating_masteries"&gt;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&lt;input type="hidden" class="sheet-toggletooltips" name="attr_tooltips"&gt; &lt;input type="text" name="attr_masteryname"&gt; &lt;select name="attr_masteryability"&gt; [...] &lt;/select&gt; &lt;input type="number" name="attr_masterythreshold" min=0 max=4&gt; &lt;span class="sheet-tooltip"&gt;&lt;input type="text" name="attr_masteryshortdescription"/&gt;&lt;textarea name="attr_masterydescription" class="sheet-toggletextarea" readonly&gt;&lt;/textarea&gt;&lt;/span&gt; &lt;/fieldset&gt; The CSS would look like .sheet-toggletextarea { display: none; } input.sheet-toggletooltips[value="1"] ~ .sheet-toggletextarea { display: block; } That is if I understand your code properly, and picked the right input to set as the copy of the external checkbox.

Hi! First: Thank you for your help so far! Unfortunately the code doesn't work although I've copied it 1:1 into my sheet. But I got around the problem of the input fields inside the repeating section not updating by writing a little Sheet Worker Script that updates them manually. Now I think I have to update the CSS somehow because the tooltip doesn't get removed when the input field has the value "0". Maybe this has to do with some of the other CSS statements? This is the input field that is outside the repeating section and when it it clicked every input field with the name "tooltips_inside" gets the same value like the one outside. &lt;input type="checkbox" class="sheet-toggletooltips" name="attr_tooltips" value="1"&gt; &lt;b&gt;Activate tooltips?&lt;/b&gt;&lt;/input&gt; This is the repeating section. The only difference is the "class" and the "name" of the input field inside the repeating section &lt;fieldset class="repeating_masteries"&gt; &lt;input type="hidden" class="sheet-toggletooltips-inside" name="attr_tooltips_inside"&gt; &lt;input type="text" name="attr_masteryname"&gt; &lt;select name="attr_masteryability"&gt; [...] &lt;/select&gt; &lt;input type="number" name="attr_masterythreshold" min=0 max=4&gt; &lt;span class="sheet-tooltip"&gt;&lt;input type="text" name="attr_masteryshortdescription"/&gt;&lt;textarea name="attr_masterydescription" class="sheet-toggletextarea" readonly&gt;&lt;/textarea&gt;&lt;/span&gt; &lt;/fieldset&gt; This is the whole CSS with the last two entries being the ones that you posted before and modified by the changed class name. .sheet-tooltip { outline: none; cursor: help; } .sheet-tooltip strong { line-height: 30px; } .sheet-tooltip:hover textarea { display: block; position: absolute; } .sheet-tooltip:hover { text-decoration: none; } .sheet-tooltip textarea { display: none; border-radius: 4px; box-shadow: 5px 5px 8px #ccc; z-index: 10; padding: 14px 20px; margin-top: -30px; margin-left: 28px; width: 300px; line-height: 16px; border: 1px solid #66BDED; background: #C7EAFF; } .sheet-toggletextarea { display: none; } input.sheet-toggletooltips-inside[value="1"] ~ .sheet-toggletextarea { display: block; } Although the input values inside the repeating section are changed the textarea doesn't disappear. Could you once again help? That would be great! Cheers!

Loki said: But I got around the problem of the input fields inside the repeating section not updating by writing a little Sheet Worker Script that updates them manually.&nbsp; What do you mean by this? The normal procedure is to use the same name for the outer checkbox and the inner hidden inputs. Then they must always update. It's not possible for them to have different values, because they are the same attribute. Although the input values inside the repeating section are changed the textarea doesn't disappear. We may be having a miscommunication here. Which input is supposed to make the tooltip appear or disappear?

Well, all I can say is that I copied the two input elements like you posted them and the input fields inside the repeating section won't update. They had the same name and the same class. But it's solved now with the Sheetworker. This is a screenshot of the sheet as it looks like atm: The red box is around the input element outside the repeating section and this should (de)activate the tooltip (green box). You introduced the option to place input fields inside the repeating section with the same name (and class?) as the input element outside the repeating section, which are marked yellow in the screenshot (they are usually hidden of course). The CSS posted by you states that whenever some input element with the class "sheet-toggletooltips" gets the value "1" the textarea element gets displayed. So I think this would work inside the repeating section, but unfortunately it doesn't. While the updating of the input fields inside the section is working fine, the textareas inside the section are yet displayed. Shouldn't the input fields inside the repeating section having names like "repeating_masteries_tooltips" and not just "tooltips"? Cheers!

I'm still not following. You keep using plural when referring to the inputs inside the repeating section. Is the checkbox supposed to change more than one input?

To avoid confusion, lets get rid of everything that isnt relevant to this problem. Before we start, comment out the sheet worker you have that is changing values, in case it is interfering. (see next post.) Then make your repeating section look like this: (copy out the original and keep it somehwere safe so you can restore it later): &lt;fieldset class="repeating_masteries"&gt; &lt;input type="hidden" class="sheet-toggletooltips-inside" name="attr_tooltips_inside"&gt; &lt;span class="sheet-tooltip"&gt;some text&lt;textarea name="attr_masterydescription" class="sheet-toggletextarea" readonly&gt;&lt;/textarea&gt;&lt;/span&gt; &lt;/fieldset&gt; I've removed all inputs that aren't related to this problem, as I understand it. Then you have this checkbox outside &lt;input type="checkbox" name="attr_tooltips" value="1" /&gt; &lt;b&gt;Activate tooltips?&lt;/b&gt; The class on this one doesnt matter. All that matters is its value and name. (Note you dont use &lt;/input&gt; with inputs.) When you click the checkbox here, it gets a value of 1. That gives the input above inside the fieldset a value of 1, because they are both the same attribute. They absolutely can not have a different value.&nbsp; &nbsp;(see next post.) Now you have the CSS styles: textarea.sheet-toggletextarea { display: none; } input.sheet-toggletooltips-inside[value="1"] ~ textarea.sheet-toggletextarea { display: block; } I added textarea to be more clear about which ares we are talking about, and this also increases CSS specificity which is good.&nbsp; Now, with the checkbox un checked, when you hover over the "some text", nothing happens. But when you have the checkbox checked, and hover over some text, you should see the popup. Does this work? Now that i think about it, I'm wondering if what you actually want is to show the text whenever you click the checkbox, not just when you hover over the text?

Doh! i just realised I've made a mistake, you do need that sheet worker. This technique is used so often, but its rare I've applied it to a repeating section. Every attribute in a repeating section has a full name that includes the "repeating_section" at the start, so the checkbox you have outside is not the same attribute as the input inside. So dont delete your sheet worker - keep using that. But everythign else in the previous post should be checked.

I just tested the code, and it works for me (though the popup is a bit too large, when the fieldset only includes one element for testing!).

Okay, I kept the Sheetworker and it continues to work fine: And with type="hidden": As you can see: The input field above the repeating section is inactive, but the tooltip is still shown when I hover over the description text. Again my question: May it be that your CSS codes conflicts with some of the other CSS code? E.g. this code states that the textarea should be displayed: .sheet-tooltip:hover textarea { display: block; position: absolute; } Aren't this two opposite commands for the character sheet? How does the browser "know" that he shouldn't display the textarea when I hover over it AND the input field is on inactive/"0"? GiGs said: I'm still not following. You keep using plural when referring to the inputs inside the repeating section. Is the checkbox supposed to change more than one input? Well, since the input field is inside a repeating section it gets repeated every time a new item is added to the section. That is why I use the plural. My apologies if this is confusing - as you may have noticed English is not my first language.

I spoke to soon - i got the hoverytest to appear, but it wasnt being disabled. But I have found the issue. Sometimes you can only spot things when you try to build them yourself. The issue is we were setting the tooltips visibility in two places. Its being set here .sheet-tooltip:hover&nbsp;textarea&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; } and also here input.sheet-toggletooltips-inside[value="1"]&nbsp;~&nbsp;textarea.sheet-toggletextarea&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block;&nbsp;&nbsp;&nbsp; } Both rules applied to the same element, and CSS has a rule for what happens when multiple rules apoply to the same element: specificity. In the first instance it had 3 elements defining it: sheet-toiltip, hover, and textarea. The second one only had two: textarea and sheet-toggletextarea, so the first one won out and applied. To fix this we need to change the css. This .sheet-tooltip:hover&nbsp;textarea&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; } should be changed to input.sheet-toggletooltips-inside[value="1"]&nbsp;~&nbsp;.sheet-tooltip:hover&nbsp;textarea&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; } and now it works. The full CSS for this section, for clarity, becomes .sheet-tooltip&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;outline:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;help; /* you might want to remove this line */ } .sheet-tooltip&nbsp;strong&nbsp;{&nbsp;line-height:&nbsp;30px;&nbsp;} input.sheet-toggletooltips-inside[value="1"]&nbsp;~&nbsp;.sheet-tooltip:hover&nbsp;textarea&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; } .sheet-tooltip:hover&nbsp;{&nbsp;text-decoration:&nbsp;none;&nbsp;} .sheet-tooltip&nbsp;textarea&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;4px; &nbsp;&nbsp;&nbsp;&nbsp;box-shadow:&nbsp;5px&nbsp;5px&nbsp;8px&nbsp;#ccc; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;10; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;14px&nbsp;20px; &nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;-30px; &nbsp;&nbsp;&nbsp;&nbsp;margin-left:&nbsp;28px; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;16px; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#66BDED; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#C7EAFF; }

Loki said: Again my question: May it be that your CSS codes conflicts with some of the other CSS code? E.g. this code states that the textarea should be displayed: .sheet-tooltip:hover textarea { display: block; position: absolute; } Aren't this two opposite commands for the character sheet? How does the browser "know" that he shouldn't display the textarea when I hover over it AND the input field is on inactive/"0"? It seems you were on the right track while I was typing up my answer!

Yes, it works. Finally! Thank you very very much. :)

You're welcome. Sorry it took so long, haha! CSS is such a pain!