docs.as-html: move tooltips to hidden spot in dom#2878
Conversation
There was a problem hiding this comment.
There's a little bit of formatting noise due to this change.
Rich tooltips use block elements, which, in the html spec, and in how browsers interpret it, are not allowed inside <p> elements. This results in the browser closing the <p> as soon as it encounters a block element, effectively moving that block element outside of the narrative flow. To fix this, when rendering docs as html, collect the contents of tooltips in a separate collection (using `State` and `Writer`) from the rest of the document, and insert them at the end of the dom in a hidden div. Each tooltip trigger has a `data-tooltip-content-id` attribute that can be used to render the tooltip in-place when hovering with additional JavaScript.
hojberg
force-pushed
the
allow-rich-tooltips
branch
from
935bc6a to
cc4c641
Compare
| article_ [class_ "unison-doc"] $ do | ||
| content | ||
| div_ [class_ "tooltips", style_ "display: none;"] $ sequence_ tooltips | ||
| where |
There was a problem hiding this comment.
Changed this from a let..in to.a where.
| toHtml_ sectionLevel | ||
| article_ [class_ "unison-doc"] $ do | ||
| content | ||
| div_ [class_ "tooltips", style_ "display: none;"] $ sequence_ tooltips |
There was a problem hiding this comment.
This is where the tooltips are added at the end of the DOM in a hidden div.
| [ class_ "tooltip-trigger", | ||
| data_ "tooltip-content-id" tooltipId | ||
| ] | ||
| <$> currentSectionLevelToHtml triggerContent |
There was a problem hiding this comment.
Each tooltip is given an id (a number incremented through State), which is added as an html id to the content and as a data attribute to tooltip triggers to tie the pair together.
| data_ "tooltip-content-id" tooltipId | ||
| ] | ||
| <$> currentSectionLevelToHtml triggerContent | ||
| Word word -> |
There was a problem hiding this comment.
Changes below here are to satisfy the return type with State and Writer.
pchiusano
left a comment
pchiusano
left a comment
There was a problem hiding this comment.
This came out pretty nice!
I wondered later if you could directly work with HtmlT (WriterT . StateT); it might come out even nicer. But I'd leave it alone.
2 participants
Problem
Rich tooltips use block elements, which, in the html spec, and in how browsers interpret it, are not allowed inside
elements. This results in the browser closing the
as soon as it encounters a block element, effectively moving that block element outside of the narrative flow.
Solution
To fix this, when rendering docs as html, collect the contents of tooltips in a separate collection (using
StateandWriter) from the rest of the document, and insert them at the end of the DOM in a hidden div. Each tooltip trigger has adata-tooltip-content-idattribute that can be used to render the tooltip in-place when hovering with additional JavaScript.Notes
Paired with @pchiusano