TsgcHTMLComponent_Tooltip: tooltips de Bootstrap sobre los elementos de la página, como botones de barra de herramientas y campos de formulario, a partir de una lista de elementos que nombran cada uno un destino y un texto. Los tooltips se abren al pasar el ratón y con el foco del teclado, se cierran con Esc y funcionan sobre contenido que htmx intercambia, en Delphi, C++ Builder y .NET.
Añade un elemento por tooltip y sirve el HTML en la misma página que los destinos. El componente no renderiza marcado visible: un bloque JSON lista los tooltips y un pequeño script crea un tooltip de Bootstrap 5 en cada elemento de destino cuando se carga la página.
TsgcHTMLComponent_Tooltip, con un TsgcHTMLTooltipItem por tooltip en Items
Un bloque JSON y un pequeño script, sobre el paquete de Bootstrap que el motor sgcHTML sirve desde un recurso incrustado, así que no hace falta CDN
Delphi, C++ Builder, .NET
Placement, Trigger, Delay, Variant y MaxWidth del componente son los valores por defecto de cada elemento, y un elemento puede sustituir cualquiera de ellos con su propio valor. Add define un destino y un texto en una sola llamada.
uses
sgcHTML_Component_Tooltip;
var
oTip: TsgcHTMLComponent_Tooltip;
oItem: TsgcHTMLTooltipItem;
begin
oTip := TsgcHTMLComponent_Tooltip.Create(nil);
try
oTip.Placement := ttpBottom;
oTip.Delay := 100;
oTip.Add('#btnSave', 'Save the record');
oTip.Add('#btnExport', 'Export the grid to Excel');
oItem := oTip.Items.Add;
oItem.TargetComponent := edtEmail; // su EditID está definido
oItem.Title := 'Email';
oItem.Text := 'The invoice is sent to this address.';
oItem.Placement := ttpRight;
Result := oTip.HTML; // sírvelo en la página de los destinos
finally
oTip.Free;
end;
end;@* Los atributos del padre son los valores por defecto de cada elemento *@
<sgc-tooltip placement="bottom" delay="100" variant="dark" max-width="18rem">
<sgc-tooltip-item target="#btnSave" text="Save the record" />
<sgc-tooltip-item target="#email" title="Email" text="The invoice is sent to this address."
placement="right" trigger="focus" variant="light" />
<sgc-tooltip-item target=".btn-danger" text="<b>Cannot be undone</b>" html="true"
trigger="click" variant="danger" />
</sgc-tooltip>using esegece.sgcWebSockets;
var tip = new TsgcHTMLComponent_Tooltip();
tip.Placement = TsgcHTMLTooltipPlacement.ttpBottom;
tip.Delay = 100;
tip.Add("#btnSave", "Save the record");
tip.Add("#btnExport", "Export the grid to Excel");
var item = tip.Items.Add();
item.TargetComponent = edtEmail; // su EditID está definido
item.Title = "Email";
item.Text = "The invoice is sent to this address.";
item.Placement = TsgcHTMLTooltipPlacement.ttpRight;
string html = tip.HTML;Pistas breves que llegan a todos los usuarios, con el ratón, con el teclado o con un lector de pantalla.
Con el disparador por defecto, un usuario de teclado obtiene el tooltip cuando el destino recibe el foco. Los destinos que no pueden recibir el foco, como un span o un icono, reciben tabindex="0", que se quita de nuevo cuando el tooltip se elimina.
Los tooltips siguen el criterio de conformidad 1.4.13 de WCAG 2.2. Esc cierra todos los tooltips abiertos sin mover el puntero ni el foco, el puntero puede pasar sobre el tooltip sin cerrarlo y el tooltip sigue abierto hasta que el puntero o el foco lo abandonan. Nunca se cierra por un temporizador.
aria-describedby enlaza el tooltip con el elemento enfocado, de modo que los lectores de pantalla leen el texto después de su nombre. Un aria-describedby que el destino ya tenía se conserva junto a él y se restaura cuando el tooltip se cierra.
Auto, arriba, abajo, izquierda o derecha. El tooltip mantiene el lado solicitado siempre que quepa en el viewport, y solo pasa a otro lado cuando ese no tiene espacio.
Variant elige el aspecto de Bootstrap, claro, oscuro o un color del tema: primary, secondary, success, danger, warning o info. MaxWidth acepta una longitud CSS, y vacío mantiene 200px.
El texto sin formato se codifica como HTML y sus saltos de línea se convierten en <br>. Title añade una primera línea en negrita. Con HTML en True el texto es marcado que pasa por sgcHTMLSanitizeHTML, que conserva el formato y las imágenes y elimina scripts, atributos de manejadores de eventos y URL inseguras.
Los miembros que más vas a usar.
Add(aTarget, aText) añade un tooltip en una sola llamada, y Items.Add devuelve un elemento para definir el resto. Cada elemento tiene Target, TargetComponent, Text, Title y HTML, además de las cinco opciones del componente con un valor de herencia: ttpInherit, tttInherit, Delay -1, ttvInherit y un MaxWidth vacío.
Un selector CSS, y cada elemento que coincide recibe el tooltip, así que un elemento puede describir todos los botones de una clase, como .toolbar .btn-danger o [name="email"]. Un elemento sin destino se omite.
Enlaza un componente de la misma página, y el tooltip se coloca en el elemento cuyo id es la propiedad de id de ese componente: EditID para un Edit, CheckBoxID para un CheckBox, PopoverID para un Popover, o si no su ElementID. Solo se resuelve cuando ese id está definido; si no, el elemento usa Target.
Trigger abre el tooltip al pasar el ratón y con el foco (por defecto), al hacer clic, con el foco o manualmente. Delay es el número de milisegundos antes de que se abra un tooltip. En un destino de botón con el disparador de clic, Intro y Espacio lo abren o lo cierran.
Tras cada htmx:afterSwap y htmx:load el script vuelve a explorar la página. Los elementos nuevos que coinciden con un elemento reciben su tooltip, y los tooltips cuyo elemento o bloque JSON salió de la página se eliminan. El script se ejecuta una vez por página, por muchos componentes que contenga.
HTML devuelve el bloque JSON seguido del script del tooltip, o una cadena vacía cuando ningún elemento tiene destino y texto. Sírvelo con el paquete de Bootstrap, por ejemplo en el BodyContent de un TsgcHTMLTemplate_Bootstrap. Su posición en la página no importa, y el script espera al paquete.
Mantén los tooltips cortos: no pueden contener controles que el usuario deba alcanzar. Para contenido interactivo, usa un Popover o un Modal.
En una vista Razor, el Tag Helper <sgc-tooltip> renderiza el componente, con un hijo <sgc-tooltip-item /> por elemento. Los atributos del padre son los valores por defecto de cada elemento. Los tooltips no necesitan eventos de servidor, así que el componente se crea en cada renderizado. No hay atributo para TargetComponent: usa target con el id del elemento.
Demos\60.HTML\01.RunTime\29.Tour es la sgc Cloud Console en el puerto 8131, un panel SaaS con tooltips en los botones de la barra de herramientas, las tarjetas de estadísticas y los campos de formulario, junto a un recorrido de producto de primer uso. Las versiones de tiempo de diseño, Lazarus y .NET lo replican.
| Pruébalo en líneaMíralo en la demo Recorrido y tooltips, funcionando en vivo en el servidor de demos de eSeGeCe. | Abrir | |
| Ayuda en líneaReferencia completa de la API y guía de uso para este componente. | Abrir | |
| Componente TourUn recorrido guiado del producto con foco destacado, mostrado junto con los tooltips en la misma demo. | Abrir | |
| Componente PopoverUna burbuja sobre un elemento disparador para contenido que va más allá de una pista. | Abrir | |
| Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 80 componentes. | Abrir | |
| Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML. | Abrir | |
| PreciosLicencias Single, Team y Site con todo el código fuente. | Abrir |