First, mad props to the folks at Refokus. I love their FREE Rich Text Enhancer plugin. Makes Webflow’s rich text blocks infinitely more flexible. How do you add Classes, IDs, or Attributes to add custom styling to Rich Text elements in Webflow?
You can see what I’ve done with it here: Refokus-Test
My biggest victory (apart from the badass quote block) is the “tooltip”-style footnote rollovers. I think they’re working pretty damn well.
The system is really pretty cool! I can simply add a few tags into my rich text block, identifying CSS classes, then style those classes, and VOILA! I’ve got an inline button and a pop-up block.
Paragraph with highlighted text and a short tooltip. [.tip-wrap][.tip-button][.tip-button][.tip-box][.tip-tri][.tip-tri][.tip-text] a little bit of text here and a static hyperlink[.tip-text][.tip-box][.tip-wrap] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
…But if you view in mobile or a narrow window, you’ll see the problem is they tend to fly off the edge of the page.
Note that it’s impossible to do any kind of absolute positioning, here, because (as you can see in the hierarchy in the snippet above) the position of the pop-up portion of the object (“.tip-box”) is determined by the asterisk button (“.tip-button”), whose position is (in turn) determined by the text block.
So the only way I can figure to fix this is a complex piece of javascript/jquery that chimes in after the page loads, determines each object’s position relative to the viewport, then manually shifts it left or right. Of course that’s complicated by the fact that each object is display:hidden at page load, so it technically has no position. Plus none of these dynamically-generated objects have IDs, only classes.
Anyone got any simpler ideas that don’t involve a crash course in jquery?