Skip to content

simd-tooltip

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

simd-tooltip

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
dist
dist
 
 
examples
examples
 
 
README.md
README.md
 
 

README.md

simd-tooltips — drop-in install

Three artifacts to host, one script tag to include.

Files in this directory

File Size (raw) Size (gzip) Loaded
simd-tooltips.js ~22 KB ~7 KB once, when the script runs
simd-names.json ~646 KB ~92 KB eagerly, on init()
simd-data.json ~9 MB ~450 KB lazily, on first tooltip

All three must live in the same directory by default. Override with data-base-url / data-names-url / data-data-url if you need to split them up.

Minimal install

Copy these three files to any static host and include one script tag:

<script src="https://your-host/path/simd-tooltips.js" defer></script>

By default the library:

  • Listens for mousemove globally; when the cursor is over a known SIMD intrinsic or a SIMD type (e.g. __m256i, int8x16_t, svfloat32_t, __mmask8, svbool_t), shows a tooltip with the relevant info.
  • Does not mutate the DOM (lazy mode).
  • Adds one <style> to <head> and one <div class="simd-tooltip"> to <body>. Nothing else.

Customizing via the script tag

<script src=".../simd-tooltips.js"
        data-on="hover+?"            <!-- 'hover' (default) | 'click' | 'hover+?' -->
        data-wrap                    <!-- opt into walk + wrap-in-span mode -->
        data-pseudocode="expanded"   <!-- 'collapsed' (default) | 'expanded' | 'off' -->
        data-scope="article.docs"    <!-- restrict wrap mode to a subtree -->
        data-base-url="/static/simd/" <!-- if JSON sits elsewhere -->
        defer></script>

Trigger modes (data-on)

  • hover (default) — tooltip on hover.
  • click — tooltip on click; click again or click outside to dismiss.
  • hover+? (lazy only) — small ? badge on hover; click the word or the badge to open the full tooltip.

Wrap mode (data-wrap)

Walks the page once at init and wraps every intrinsic in <span class="simd-intrinsic" tabindex="0">. Adds a visible dashed underline as a "this is hoverable" cue and makes intrinsics tabbable for keyboard a11y. Use it when you want those affordances on a static page; skip it for SPAs and pages where you'd rather not touch markup.

Pseudocode in tooltips (data-pseudocode)

  • collapsed (default) — pseudocode is in the tooltip behind a ▸ pseudocode expander; readers click to reveal.
  • expanded — pseudocode is shown unfolded by default.
  • off — pseudocode is not rendered at all (the tooltip stays compact).

Programmatic init

<script src=".../simd-tooltips.js" data-no-auto defer></script>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    SimdTooltips.init({
      on: 'hover+?',
      // wrap: true,                  // walk + visible underline + tab focus
      // scope: '.code',
      // dataUrl: '/cdn/simd-data.json',
      // names: PRELOADED_NAMES,      // skip fetch if you have it inline
      // data: PRELOADED_RECORDS,
    });
  });
</script>

API surface:

  • SimdTooltips.init(opts) — start (or restart) the library.
  • SimdTooltips.scan(scope) — wrap mode only: re-walk a subtree (use after injecting new content in an SPA).
  • SimdTooltips.unwrap(scope) — wrap mode only: remove all wrappers.
  • SimdTooltips.hide() — close the current tooltip.

init() is reentrant: calling it again tears down the previous listeners and starts fresh, so you can swap modes on the fly.

Hosting notes

  • Cross-origin: serve the JSON host with Access-Control-Allow-Origin: * (or the page's origin). The library uses fetch(..., { credentials: 'omit' }) — no preflight required.
  • Compression: please serve with gzip or brotli. The data file goes from 9 MB to ~450 KB. Most CDNs do this by default.
  • Caching: the data files are immutable per build. Use a versioned path (e.g. /v1/) and Cache-Control: public, max-age=31536000, immutable.
  • CSP: the library injects a <style> element. If you have a strict CSP, allow style-src 'self' 'unsafe-inline' or pin a CSP hash. No inline <script> is added.
  • Local testing: open via python3 -m http.server (or any local web server). fetch() does not work from file://.

Where the data comes from

The intrinsic database is built from upstream ARM ACLE JSON (CC-BY-SA-4.0), Intel Intrinsics Guide XML, and LLVM clang headers (Apache-2.0 WITH LLVM-exception). See ../data/NOTICE and ../data/README.md in this repo for full attribution and rebuild instructions.

Updating

The artifacts are regenerated by:

scripts/build_all.sh             # cached re-run
scripts/build_all.sh --refresh   # force re-fetch upstream

Outputs land in this directory.