5 ms·

Just CSS is not enough for tooltips... Here is what we've got in 10+ tooltip providing experience in Sciter[1] ... Declarative tooltips support: <div tit

Just CSS is not enough for tooltips... Here is what we've got in 10+ tooltip providing experience in Sciter[1] ... Declarative tooltips support: <div title="some text" /> <div titleid="dom-element-id" /> <div tooltip="<b>some html goes here</b>" /> Dynamic support, on demand, event handler: element.ontooltiprequest = function(evt) { evt.relatedTarget = ... some dome element reference ... } Dynamic, explicit popup show: anchorEl.popup(popupEl, {anchorPos:..., popupPos:...}); anchorEl.popup(<div>some JSX expr</div>, {anchorPos:..., popupPos:...}); Popups (tooltips included) are shown as out-of-canvas elements - separate desktop windows, that's the must for desktop UI. Check this: https://terrainformatica.com/w3/sciter-tooltip.png https://terrainformatica.com/w3/sciter-tooltip.png So far these APIs appear as complete, I do not have other tooltip related requests last 5 or so years. And finally CSS styling: anchorselector > popup[role="tooltip"] { ... } [1] https://sciter.com https://sciter.com

wildrhythms 4y ago
How do you style the tooltips? Fixed positioning? I always run into issues where I need to maintain some document.body level collection of tooltips because 'position: fixed' is affected by its parent elements also having 'position: fixed' applied- it's deceptively not as simple as just inserting a tooltip in the DOM where the anchor lives.
- c-smile 4y ago
  There is a special internal position:popup mode that cannot be set in CSS. Only internally. position:popup is accompanied with the pair of anchor-position:1..9 and popup-position:1..9 props. For the meaning of these numbers see NUMPAD keys on keyboard. They define attachment of popup to the anchor. anchor-position:1; popup-position:7; means border-box bottom-left corner of anchor corresponds to top-left margin box corner of popup. That positioning schema defines position of the popup relative to the anchor.

wildrhythms 4y ago

How do you style the tooltips? Fixed positioning? I always run into issues where I need to maintain some document.body level collection of tooltips because 'position: fixed' is affected by its parent elements also having 'position: fixed' applied- it's deceptively not as simple as just inserting a tooltip in the DOM where the anchor lives.

c-smile 4y ago
There is a special internal position:popup mode that cannot be set in CSS. Only internally. position:popup is accompanied with the pair of anchor-position:1..9 and popup-position:1..9 props. For the meaning of these numbers see NUMPAD keys on keyboard. They define attachment of popup to the anchor. anchor-position:1; popup-position:7; means border-box bottom-left corner of anchor corresponds to top-left margin box corner of popup. That positioning schema defines position of the popup relative to the anchor.