search

Pinjasaur / blot-theme-jot

Theme for Blot, as used on my blog.
https://paul.af
9 stars 1 forks source link

`cuetip` integration #6

Open Pinjasaur opened 3 years ago

Pinjasaur commented 3 years ago

Currently import cuetip but could do better with how it's themed for the blog and likely dropping the use of the tails/triangles as the math for aligning them is finnicky across fonts and font sizes.

Starting with a customize request payload of:

{
  "vars": {
    "namespace": {
      "value": "tooltip",
      "type": "string"
    },
    "class-prefix": {
      "value": "tooltip--",
      "type": "string"
    },
    "no-tail": {
      "value": "no-tail",
      "type": "string"
    },
    "default-position": {
      "value": "top",
      "type": "string"
    },
    "has-tail": {
      "value": "false",
      "type": "boolean"
    },
    "cursor": {
      "value": "inherit",
      "type": "keyword"
    },
    "z-index": {
      "value": "9999",
      "type": "number"
    },
    "color-foreground": {
      "value": "var(--bg)",
      "type": "color"
    },
    "color-background": {
      "value": "var(--accent)",
      "type": "color"
    },
    "padding": {
      "value": ".25em .4em",
      "type": "units"
    },
    "border-radius": {
      "value": "2px",
      "type": "units"
    },
    "tail-size": {
      "value": ".25em",
      "type": "units"
    },
    "offset": {
      "value": ".1em",
      "type": "units"
    }
  }
}

and then supplement with a few additional lines of CSS should be a good starting point I would think:

[data-tooltip] {
  text-decoration: underline dotted;
}
abbr[data-tooltip] {
  cursor: help;
}
[data-tooltip]:after {
  font-size: 1em;
  opacity: .9;
}

There's a much larger conversation to be had w.r.t. a11y i.e., using aria-label (see https://github.com/Pinjasaur/cuetip/issues/3). I'm not sure how much benefit I'm necessarily gaining over the builtin footnotes and attr[title] markup.