Cell Tooltip — Form Validation
Event registration form with contextual tooltips: blue hints for required fields, red error messages after validation. Fill, validate, and cycle through errors interactively.
How it works
This demo renders an event registration form inside a ReoGrid spreadsheet. Two tooltip modes are shown: blue informational hints on empty required fields, and red error messages after failed validation.
- Clicking "Show Hints" populates each required-field cell with a blue tooltip — hover over or click "Next Tooltip" to cycle through them
- Clicking "Validate" runs custom validation logic per field (required check, email format, phone digit count)
- Failed fields get a red error tooltip; the first error is shown automatically and the cycle button navigates between errors
- Valid fields show a green checkmark; all fields passing validation shows a success message
- Tooltips are attached programmatically per cell — position, style, and content are all controlled via API
Key APIs used
ws.setCellTooltip(pos, options) Attach a tooltip to a specific cell with text content, background color, text color, and display mode
ws.showCellTooltip(pos) Programmatically show the tooltip attached to a specific cell position
ws.range(ref).merge() Merge the title and subtitle rows across all columns for the form header
ws.cell(row, col).setStyle(style) Style label cells (bold), value input cells (white background), and status cells with color feedback
Source Code
Related Documentation
Related Demos
Cell Types Dashboard
Progress bars, star ratings, sparkline charts, checkboxes, and hyperlinks — all rendered inside spreadsheet cells.
Data Filter & Sort
Click column header dropdowns to filter and sort rows. Switch between 300, 1K, and 10K rows to test performance.
Cell Styles
Font styles, colors, backgrounds, text alignment, and border options — a showcase of the Cell Style API.