[Help] Building CSS tooltips without the use of Anchor Tags

I'm creating automated status effect checkboxes. So when you check a status it automatically applies the penalties and bonuses to the dice rolls.  I would like to create informational tool tips, so when the player hovers over them, they cause a small message to appear that explains to them what the effect of that status is. So things like Blind, Fear, Ect.  However, every CSS tooltip tutorial I find uses Anchor Tags. Roll20 appears to be stripping out my anchor tags (Which makes sense for security reasons). I can't figure out how to make tooltips work without Anchor Tags however. Just replacing Anchor tags with say a span doesn't seem to work. Any help from the wizards would be appreciated. Thanks! CSS Mark-up

You're hiding and displaying the ::after pseudo-element when you hover over the anchor... but ::after contains no content at all. You want to show/hide the span and style the span, not show/hide the ::after and style the ::after. Here's an example , and I've even changed the anchor to a span to show that it works that way. Here's a slightly fancier CSS tooltip . You can also, of course, simply use the title  attribute on an element to get a very basic tooltip.

Thank you very much.  I feel fairly good about my CSS skills getting even this far, but man some of the hacky stuff you need to do is super confusing. That second example is half nonsense to me. Your first example makes a bit more sense. I basically just trolled the internet and copy/pasted in the code, and i wasn't 100% clear on how it actually worked.  Thanks again!

If you look at my 5e Shaped sheet I have tooltips setup. My scss (though should be easy to convert to plain css if you're not using a pre-processor): .sheet-tooltip-position-wrapper, .sheet-rolltemplate-5eDefault .sheet-tooltip-position-wrapper { position: absolute; top: 1px; right: 1px; z-index: 99; } .sheet-tooltip, .sheet-rolltemplate-5eDefault .sheet-tooltip { position: relative; } .sheet-tooltip-toggle-text, .sheet-rolltemplate-5eDefault .sheet-tooltip-toggle-text { border-radius: 50%; font-size: 77%; height: 10px; width: 10px; background-color: black; color: white; padding: 1px 2px; font-weight: bold; } [class*="sheet-tooltip-content"], .sheet-rolltemplate-5eDefault [class*="sheet-tooltip-content"] { z-index: 99; position: absolute; color: #FFFFFF; background-color: #000000; padding: 4px; visibility: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; opacity: 0.9; width: 260px; margin-top: -15px; text-align: left; &::after { content: ""; position: absolute; top: 9px; margin-top: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } } .sheet-tooltip-small, .sheet-rolltemplate-5eDefault .sheet-tooltip-small { width: 80px; } .sheet-tooltip-content-left, .sheet-rolltemplate-5eDefault .sheet-tooltip-content-left { right: 100%; margin-right: 12px; border-top-left-radius: 4px; } .sheet-tooltip-content-right, .sheet-rolltemplate-5eDefault .sheet-tooltip-content-right { left: 100%; margin-left: 12px; border-top-right-radius: 4px; } .sheet-tooltip-content-left::after, .sheet-rolltemplate-5eDefault .sheet-tooltip-content-left::after { right: -8px; border-left: 8px solid #000000; } .sheet-tooltip-content-right::after, .sheet-rolltemplate-5eDefault .sheet-tooltip-content-right::after { left: -8px; border-right: 8px solid #000000; } .sheet-tooltip:hover [class*="sheet-tooltip-content"], .sheet-tooltip:focus [class*="sheet-tooltip-content"], .sheet-rolltemplate-5eDefault .sheet-tooltip:hover [class*="sheet-tooltip-content"], .sheet-rolltemplate-5eDefault .sheet-tooltip:focus [class*="sheet-tooltip-content"] { visibility: visible; z-index: 999; } Accompanying HTML: <div class="sheet-col sheet-tooltip-position-wrapper"> <div class="sheet-tooltip"> <div class="sheet-tooltip-toggle-text sheet-center">?</div> <div class="sheet-tooltip-content-left sheet-small-label">TOOLTIP CONTENT</div> </div> </div>

Thanks for the help. Though you have only confirmed my suspicions that CSS was designed by sadists who hate human life. I did rock the 5th edition sheet first, but what was being done there didn't make a ton of sense. I'm fairly new to CSS, so messing with pre-proccessors and 100 lines of code is just a recipe for diaster. I need something i can build 'incrementally' and see what the peices are doing as I build it, so i know it's not broke. Given my limited knowledge, i need to gun for maintainability. I write javascript fairly fluently, and I use a fair number of home-grown scripts for my current games. CSS is always the hardest thing to do when making anything in my expeirance, roll20 or otherwise. I applaud the people who can do the CSS Wizardry and have it make sense, and that code sir, is crazy. 

You're not going to make decent tooltips without that much CSS. I created a jsfiddle for you:&nbsp; <a href="https://jsfiddle.net/zo2soxuv/1" rel="nofollow">https://jsfiddle.net/zo2soxuv/1</a> . This should allow you to remove sections and see what it did. I can explain anything that you're confused about.

I went&nbsp; here&nbsp; to get my first tooltip code, and learned from the doing. &nbsp;

Thanks All! I used brians example. It seemed both the cleanest and easiest to maintain.