Using data- attributes or alternatives for popovers

I am working on a popover for abbreviations. I was hoping to make something nice to display other than the title tag inside of the element. I have it working, but since I have to rely on title right now, it'll show both my popover and the tooltip over a time: Label didn't seem to work, and it appears data- attributes get eaten? As does the abbreviation tag, oddly enough. Can anyone think of a better way of handling this in Roll20?

Only bumping this the one time, because I assume there's not other way. That's fine, but it's nice to strive for perfection.

Label didn't seem to work, and it appears data- attributes get eaten? Could you show your code for this that didn't work? I think I know what mistake you might be doing. And both labels and placeholders can be given their own data-i18n tags, thing they are documented on the main wiki page.

Andreas J. said: Could you show your code for this that didn't work? I think I know what mistake you might be doing. And both labels and placeholders can be given their own data-i18n tags, thing they are documented on the main wiki page. Sure, here's what I have now: mixin  popover (initialText, popoverText)    span .popover(title= popoverText  data-i18n-title= i18nize ( popoverText )  data-i18n= i18nize ( initialText ) ) =  initialText And here's what I have for when I was using label: mixin  popover (initialText, popoverText)    span .popover(label= popoverText  data-i18n-label= i18nize ( popoverText )  data-i18n= i18nize ( initialText ) ) =  initialText I can provide the CSS, but it's working. I assumed the parser was eating the label attribute because it's not valid on a span. The data attributes are mostly the same, but still get eaten, even if I remove the data-i18n portion.

Oh you didn't mention the issue was preprosessor stuff. I'm not that familiar with them. If your doing some stuff in pug/sass/scss or similar, it's smart to say so. Thought you where having a problem in the html/css directly.

My apologies, my issue isn't with the pre-processor. Here's the result after compilation: < span  class= "popover"  title= "Damage Value"  data-i18n-title= "damage_value-u"  data-i18n= "dv-u" >DV</ span > And here's the result when using a label: < span  class= "popover"  label= "Damage Value"  data-i18n-label= "damage_value-u"  data-i18n= "dv-u" >DV</ span >

i guess it means that "label" haven't been given the option to use i18n. You could search the repo if there exist any working instances. If not, there would be a good indicator I might be right.

Label is usable as an i18n option. The following HTML, for example, works just fine with it. &lt; optgroup &nbsp;label= "Astral" &nbsp;data-i18n-label= "astral-u" &gt; &nbsp;&nbsp;&lt; option &nbsp;data-i18n= "astralcombat-u" &nbsp;value= "Astral&nbsp;Combat" &gt;Astral&nbsp;Combat&lt;/ option &gt; &nbsp;&nbsp;&lt; option &nbsp;data-i18n= "astralsignatures-u" &nbsp;value= "Astral&nbsp;Signatures" &gt;Astral&nbsp;Signatures &nbsp;&nbsp;&lt;/ option &gt; &nbsp;&nbsp;&lt; option &nbsp;data-i18n= "emotionalstates-u" &nbsp;value= "Emotional&nbsp;States" &gt;Emotional&nbsp;States&lt;/ option &gt; &nbsp;&nbsp;&lt; option &nbsp;data-i18n= "spirittypes-u" &nbsp;value= "Spirit&nbsp;Types" &gt;Spirit&nbsp;Types&lt;/ option &gt; &lt;/ optgroup &gt; "label" isn't a valid attribute for a span tag, though, so I assume their HTML sanitizer is stripping it. They specifically reference in the documentation also:&nbsp; <a href="https://roll20.zendesk.com/hc/en-us/articles/360037773493#CharacterSheetTranslation-ElementAttributeText" rel="nofollow">https://roll20.zendesk.com/hc/en-us/articles/360037773493#CharacterSheetTranslation-ElementAttributeText</a> I can live with the title tag, I was hoping that someone knew of a more clever way.

It sounds like the answer is going to be there's no real option, as the HTML sanitizer is going to remove data- attributes, and ones that don't apply to the HTML element, and none others are appropriate for what I'm trying to accomplish. Unless I didn't want to internationalize the popover, perhaps, but I do. Thank you for your help!

I'm gonna point out that the helpdesk docs on char sheet creation isn't as well maintained as the wiki version(which is also better interlinked): <a href="https://wiki.roll20.net/Building_Character_Sheets" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets</a>

The Wiki pushes us to use the Zendesk stuff, though, so unfortunately I reference that until they remove the warning or the wiki. The Wiki holds the same information on which attributes are available, though:&nbsp; <a href="https://wiki.roll20.net/I18n#Element_Attribute_Text" rel="nofollow">https://wiki.roll20.net/I18n#Element_Attribute_Text</a> Reading this again, though, aria-label may be a good option. I'll try that out later and tell you how it goes :D

Codeacula said: The Wiki pushes us to use the Zendesk stuff, though, so unfortunately I reference that until they remove the warning or the wiki Well, I'm telling you "Character Sheet Creation"-documentation is better on the wiki, because we the community are able to continue to update it. Take a look at who is credited for the zendesk article . Just trust me in this case. For general Roll20 features, sure it's slightly more lightly that the zendesk articles are better. The Wiki holds the same information on which attributes are available, though:&nbsp; <a href="https://wiki.roll20.net/I18n#Element_Attribute_Text" rel="nofollow">https://wiki.roll20.net/I18n#Element_Attribute_Text</a> Yes, for that specific section. But if you compare the whole page, you're going to see that the wiki article contains more info, and more links to relevant stuff. It also include several pages that doesn't exist on the zendesk, such as: <a href="https://wiki.roll20.net/Sheet_Author_Tips" rel="nofollow">https://wiki.roll20.net/Sheet_Author_Tips</a> Also lol at zendesk linking to my github and my scripts and settings files, glad they kept that from when they ported stuff over. :D

Looks like aria-label did it!

Well done. Can you post the code that worked? (the final version, not the preprocessed version). Also andreas is right about the wiki. Roll20 staff have taken the weird step of moving their official documentation off the wiki to their zendesk site. But their documentation has always been very poor and skimpy, so I dont have high hopes for that. The wiki has been massively expanded by the community, and that is going to be my primary reference. You can be sure that any newer documentation that gets posted to zendesk first will be very quickly backported to the wiki, and the wiki will be forever expanded by the community, so it's always going to be the site that has the best information.

It works except for the i18n script not picking it up, requiring me to manually add the i18n HTML: &lt; span &nbsp;class= "popover" &nbsp;aria-label= "Damage&nbsp;Value" &nbsp;data-i18n-aria-label= "damage_value-u" &nbsp;data-i18n= "dv-u" &gt;DV&lt;/ span &gt; CSS (I cut this out of the built sheet, so let me know if it doesn't work): .sheet-popover &nbsp;{ &nbsp;&nbsp; position : relative ; &nbsp;&nbsp; text-decoration : underline ; &nbsp;&nbsp; text-decoration-style : dotted ; } .sheet-popover::before &nbsp;{ &nbsp;&nbsp; background : #000 ; &nbsp;&nbsp; border-radius : 5px ; &nbsp;&nbsp; content : attr (aria-label); &nbsp;&nbsp; padding : .5em ; &nbsp;&nbsp; position : absolute ; &nbsp;&nbsp; transform : translateX ( -30% ) &nbsp; translateY ( 30% ); &nbsp;&nbsp; top : -2.5em ; &nbsp;&nbsp; white-space : nowrap ; &nbsp;&nbsp; transition : all &nbsp; .5s ; &nbsp;&nbsp; visibility : hidden ; } .sheet-popover:hover::before &nbsp;{ &nbsp;&nbsp; visibility : visible ; &nbsp;&nbsp; transform : translateX ( -30% ) &nbsp; translateY ( 0% ); }