La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para páginas web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos. hace que las páginas web se vean increíbles y receptivas.
La ventana emergente de interfaz de usuario semántica se utiliza para mostrar información adicional a través de ventanas emergentes para el usuario. Alerta y proporciona al usuario la información necesaria. Las ventanas emergentes pueden ayudar a ahorrar espacio y solo muestran información cuando el usuario interactúa con la página web.
Semantic-UI Popup Tooltip Type se usa para especificar el elemento de información sobre herramientas que puede aparecer sin usar JavaScript. El elemento de información sobre herramientas utiliza :before y :after pseudo-clases.
Atributo utilizado del tipo de información emergente de la interfaz de usuario semántica:
- información sobre herramientas de datos: este atributo se utiliza para mostrar el cuadro emergente de información sobre herramientas.
Sintaxis:
<div class="ui icon button" data-tooltip="" data-position=""> <i class="icon-name icon"></i> </div>
Ejemplo 1: en este ejemplo, describiremos el uso del tipo de información sobre herramientas emergente de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Popup Tooltip Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Popup Tooltip Type</h3> <div class="ui icon button" data-tooltip="GeeksforGeeks Comments"> <i class="comment icon"></i> </div> <div class="ui button" data-tooltip="HTML Tutorial" data-position="top left"> HTML </div> <div class="ui button" data-tooltip="CSS Tutorial" data-position="top right"> CSS </div> <div class="ui button" data-tooltip="JavaScript Tutorial" data-position="bottom left"> JavaScript </div> <div class="ui button" data-tooltip="jQuery Tutorial" data-position="bottom right"> jQuery </div> <div class="ui button" data-tooltip="Bootstrap Tutorial" data-position="top center"> Bootstrap </div> <div class="ui button" data-tooltip="Angular.js Tutorial" data-position="bottom center"> Angular.js </div> <div class="ui button" data-tooltip="React.js Tutorial" data-position="left center"> React.js </div> <div class="ui button" data-tooltip="Node.js Tutorial" data-position="right center"> Node.js </div> </div> </body> </html>
Producción:
Tipo de información emergente de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, describiremos el uso del tipo de información sobre herramientas emergente de interfaz de usuario semántica con variaciones de datos invertidos.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Popup Tooltip Type </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Popup Tooltip Type</h3> <div class="ui icon button" data-inverted="" data-tooltip="GeeksforGeeks Comments"> <i class="comment icon"></i> </div> <div class="ui button" data-inverted="" data-tooltip="HTML Tutorial" data-position="top left"> HTML </div> <div class="ui button" data-inverted="" data-tooltip="CSS Tutorial" data-position="top right"> CSS </div> <div class="ui button" data-inverted="" data-tooltip="JavaScript Tutorial" data-position="bottom left"> JavaScript </div> <div class="ui button" data-inverted="" data-tooltip="jQuery Tutorial" data-position="bottom right"> jQuery </div> <div class="ui button" data-inverted="" data-tooltip="Bootstrap Tutorial" data-position="top center"> Bootstrap </div> <div class="ui button" data-inverted="" data-tooltip="Angular.js Tutorial" data-position="bottom center"> Angular.js </div> <div class="ui button" data-inverted="" data-tooltip="React.js Tutorial" data-position="left center"> React.js </div> <div class="ui button" data-inverted="" data-tooltip="Node.js Tutorial" data-position="right center"> Node.js </div> </div> </body> </html>
Producción:
Tipo de información emergente de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/popup.html#tooltip