/* ============================================================
CurrencyDesk OS — InfoTip
One reusable hover-help affordance used across the whole app:
a small ⓘ dot that, on hover, shows a dark popover explaining a
confusing term. Auto-dismisses the moment the cursor leaves; the
popover is portalled to and pointer-transparent so it never
clips inside scroll panels and never flickers.
Usage:
============================================================ */
(function () {
const { useState, useRef } = React;
const { CD, Ic } = window.CDOS;
// one-time fade-in keyframes
if (!document.getElementById('cdos-infotip-kf')) {
const st = document.createElement('style');
st.id = 'cdos-infotip-kf';
st.textContent = '@keyframes cdosTipIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.cdos-infotip-pop{animation:cdosTipIn .12s ease-out}';
document.head.appendChild(st);
}
function InfoTip({ title, body, example, lines, size = 14, w = 252, tone }) {
const [open, setOpen] = useState(false);
const [box, setBox] = useState(null);
const ref = useRef(null);
const show = () => {
const el = ref.current; if (!el) return;
const r = el.getBoundingClientRect();
const vw = window.innerWidth;
const center = r.left + r.width / 2;
let left = center - w / 2;
left = Math.max(8, Math.min(left, vw - 8 - w));
setBox({ left, top: r.bottom + 8, arrow: Math.max(10, Math.min(center - left, w - 14)) });
setOpen(true);
};
const hide = () => setOpen(false);
return (
{open && box && ReactDOM.createPortal(