OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 37 LINES
 
[ HISTORY ]  [ UP ]
 

---
import "./HelpHint.scss";

// "(?)" icon with a CSS-only tooltip; explanation goes in the slot

interface Props {
  title?: string;
  glyph?: string;
  align?: "left" | "right";
  // default "below" since most usages live in bordered cards where above
  // leaks outside the card boundary
  placement?: "above" | "below";
}

const {
  title,
  glyph = "?",
  align = "right",
  placement = "below",
} = Astro.props;
---

<span
  class:list={["help-hint", `help-hint--${align}`, `help-hint--${placement}`]}
>
  <button
    type="button"
    class="help-hint__trigger"
    aria-label={title ?? "More info"}
    tabindex="0">{glyph}</button
  >
  <span class="help-hint__bubble" role="tooltip">
    {title && <strong class="help-hint__title">{title}</strong>}
    <span class="help-hint__body"><slot /></span>
  </span>
</span>


---
import "./HelpHint.scss";

// "(?)" icon with a CSS-only tooltip; expla
nation goes in the slot

interface Props {
  title?: string;
  glyph?: string;
  align?: "left" | "right";
  // default "below" since most usages live 
in bordered cards where above
  // leaks outside the card boundary
  placement?: "above" | "below";
}

const {
  title,
  glyph = "?",
  align = "right",
  placement = "below",
} = Astro.props;
---

<span
  class:list={["help-hint", `help-hint--${al
ign}`, `help-hint--${placement}`]}
>
  <button
    type="button"
    class="help-hint__trigger"
    aria-label={title ?? "More info"}
    tabindex="0">{glyph}</button
  >
  <span class="help-hint__bubble" role="tool
tip">
    {title && <strong class="help-hint__titl
e">{title}</strong>}
    <span class="help-hint__body"><slot /></
span>
  </span>
</span>

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET