tiptex

TipTex

TipTex is a simple JavaScript library that allows you to create interactive LaTeX equations using KaTeX with tooltips powered by Tippy.js. It's designed to make mathematical equations in web pages more interactive and informative.

Features

Simply render LaTeX equations with interactive tooltips.

Setup

Install TipTex via npm:

npm install tiptex

Or, if you prefer using Yarn:

yarn add tiptex

Usage

Note: v1.1+ introduces a new API that is more compatible with LaTeX.

Here's a quick example to get you started:

import {render} from 'tiptex';

const equation = render({
  latex: `\\group{outer}{\\id{e}{e} = \\group{rhs}{\\id{m}{m}\\id{csq}{c^2}}}`,
  interactiveElements: {
    e: { href: "https://en.wikipedia.org/wiki/Mass%E2%80%93energy_equivalence", },
    m: { label: 'mass'},
    csq: { label: 'speed of light (squared)'},
  },
  groups: {
    'outer': { label: 'Energy-mass equivalence'},
    'rhs': { label: 'Inherent energy content of mass'},
  },
  enableCopy: true,
})

document.getElementById('equationContainer').appendChild(equation);

This will render the equation e=mc^2 with tooltips for m and c^2, and make e a clickable link.

Open test.html to see the above in action.

API

The render function accepts multiple objects as arguments, each representing a part of the equation in sequential order. These objects can have the following properties:

• value: The LaTeX string or plain text to be displayed.
• plainText: Set to true if val is plain text. Defaults to false.
• href: URL to open when the part is clicked (optional).
• label: Tooltip text to display when hovering over the part (optional).