A CSS-only Approach to Tooltip Icons for Help Text in Episerver

I was working through cleaning up the interface for my latest Episerver project the other day - clearly defining names, adding icon attributes to pages, adding helpful descriptions - and I saw a Tweet buzz across the wire for an article on adding icons to properties with Help Text (Description). The article is actually really good, and it got picked up by a couple colleagues of mine who implemented the solution in it. It's by Ted Nyberg and you should check it out here: https://tedgustaf.com/blog/2016/icon-for-property-help-texts-in-episerver/.

It sparked a memory for me, though, of another article I had bookmarked a short while back by Alf Nilsson, on how to expose the Help Text (Description) alongside the property name in the UI, eliminating the need to hover. Again, it's another good article and you should read it as well: https://talk.alfnilsson.se/2014/12/18/display-help-text-in-on-page-editing/.

Both of these articles touch on a pain point of mine, and various other Episerver developers, around how the Help Text (Description) is displayed for properties in the UI, and it got me thinking of another approach to address this issue, essentially combining these two ideas.

Refresh CSS without refreshing your page

I've been using Visual Studio 2013 for several months now and one of the new features I was enjoying was Browser Link. Since I have been implementing the front end for a project, I have been using Web Essentials for VS 2013 with all the CSS built using LESS. While I have used more complex and advanced LESS compilers, it's got a nice integration into Visual Studio with pretty solid support, and the developer has been keeping it well updated. It's nice because I can play in my browser, move my changes into my "main.less" file right in VS, fire off a Shift+Alt+Y shortcut combo, and my LESS files are compiled into my "main.css" file. With Browser Link, the page detects the change and refreshes with the CSS updates. Voila!

Now, anyone who read that with a keen eye would have noticed the use of the word "was" in the opening sentence. A past progressive verb! This means I am not "enjoying" the feature anymore.