Implementation:AUTOMATIC1111 Stable diffusion webui UI Hints
| Knowledge Sources | |
|---|---|
| Domains | UI_Frontend, Tooltips, Localization |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Provides mouseover tooltip text for UI elements throughout the web interface, with support for localization.
Description
This JavaScript module maintains a comprehensive dictionary (titles) mapping UI element labels, button text, and emoji icons to descriptive tooltip strings. The dictionary covers sampling parameters, image processing options, training settings, inpainting controls, upscaling options, checkpoint management, and more. The updateTooltip function checks an element's textContent, value, dataset.value, and CSS classes against the titles dictionary and sets the element's title attribute to the matching tooltip (with localization support). To avoid performance issues, tooltip updates are debounced: a MutationObserver in onUiUpdate collects newly added DOM nodes into a Set (tooltipCheckNodes), and a 1-second debounced timer processes them in batch. Special handling is included for Gradio dropdown menus, which clear and reset the input title when options change. On UI load, the module also applies webui_tooltip properties from Gradio component configuration to their corresponding DOM elements.
Usage
Tooltips appear automatically when hovering over labeled elements in the web UI. The titles dictionary is built into the module and requires no user configuration. Localization of tooltip text is handled through the localization system. Extensions can add entries to the titles object to provide tooltips for their own UI elements.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/hints.js
- Lines: 1-203
Signature
var titles = { /* label -> tooltip mapping */ }
function updateTooltip(element)
function processTooltipCheckNodes()
// Callbacks: onUiUpdate(function(mutationRecords) { ... })
// Callbacks: onUiLoaded(function() { ... })
Import
// Loaded automatically by the web UI as part of the javascript/ directory
// The titles object is accessible globally for extension use
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| element | HTMLElement | Yes | A DOM element to check for tooltip assignment |
| mutationRecords | MutationRecord[] | Yes | DOM mutation records from MutationObserver for detecting new elements |
Outputs
| Name | Type | Description |
|---|---|---|
| (side effect) | DOM | Sets the title attribute on matching elements with the appropriate tooltip text |
Usage Examples
// Tooltips are applied automatically. To add custom tooltips:
titles["My Custom Button"] = "Description of what this button does";
// The tooltip system will automatically pick up the new entry
// when elements with matching text appear in the DOM.
// To manually trigger a tooltip update on a specific element:
updateTooltip(document.querySelector('#my-element'));