La información sobre herramientas de Bootstrap nos da una pista sobre el elemento específico de una manera gráfica. La información sobre herramientas se utiliza por razones de rendimiento, por lo que se puede personalizar según el dominio de requisitos. La información sobre herramientas se implementa mediante javascript, se basa en una biblioteca de terceros conocida como popper.js para fines de posicionamiento.
Funciona con el concepto de pasar el mouse sobre el puntero del cursor cuando el puntero se desplaza sobre el elemento, una sugerencia puede surgir en cualquiera de las 4 direcciones (izquierda, derecha, arriba y abajo) como se indica en el código.
Algunos ejemplos generales:
- En una página de inicio de sesión, la información sobre herramientas de contraseña muestra el requisito, por ejemplo, debe tener 8 caracteres, comenzar con una letra mayúscula, etc.
- Para el nombre , puede que solo se escriba el nombre y no el segundo nombre o el apellido.
El fragmento de JavaScript
// Write Javascript code here $(function () { $('[data-toggle="tooltip"]').tooltip() })
Nota: se utiliza HTML, CSS, Bootstrap, JavaScript y jQuery.
- Método 1: La siguiente implementación se realiza para 4 botones a la izquierda, derecha, arriba y abajo y sus respectivos consejos de herramientas que indican la posición de los botones respectivamente cuando el cursor pasa sobre los botones.
- Método 2: La siguiente implementación es una página de registro con información sobre herramientas para dar consejos/recomendaciones. La etiqueta de formulario en el HTML se usa para crear un formulario y los atributos de información sobre herramientas se agregan en consecuencia.
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bootstrap Grid</
title
>
<!-- Latest compiled and minified CSS -->
<
link
rel
=
"stylesheet"
href
=
<!-- Optional theme -->
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<!-- Latest compiled and minified JavaScript -->
<
script
src
=
</
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
$('#name').tooltip({
'trigger': 'focus',
'title': 'Name is Required'
});
$('#email').tooltip({
'trigger': 'focus',
'title': 'Email is Required'
});
$('#password').tooltip({
'trigger': 'focus',
'title': "Password is Required"
});
});
</
script
>
<
style
>
.serif {
font-family: "Times New Roman", Times, serif;
}
p {
padding: 20px;
}
</
style
>
</
head
>
<
body
>
<
h1
><
p
class
=
"serif"
>Sign Up Sample Page</
p
></
h1
>
<
div
class
=
"container"
style
=
"padding:50px;"
>
<
form
role
=
"form"
>
<
div
class
=
"form-group"
>
<
label
for
=
"firstname"
>Name</
label
>
<
input
type
=
"text"
name
=
"Name"
class
=
"form-control"
id
=
"name"
placeholder
=
"Enter Name"
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"email"
>Email</
label
>
<
input
type
=
"text"
name
=
"email"
class
=
"form-control"
id
=
"email"
placeholder
=
"Enter email"
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"Password"
>Password</
label
>
<
input
type
=
"password"
name
=
"password"
class
=
"form-control"
id
=
"password"
placeholder
=
"Enter Password"
>
</
div
>
</
form
>
</
div
>
</
body
>
</
html
>
Producción:
<!DOCTYPE html> < html > < head > < meta name = "viewport" content = "width=device-width,initial-scale=1.0" /> < title > HTML with twitter Bootstrap tooltip using jQuery </ title > < link rel = "stylesheet" href = integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin = "anonymous" > < script src = </ script > < script src = integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin = "anonymous" > </ script > < script type = "text/javascript" > $(document).ready(function() { $("#toptip").tooltip({ placement: "top" }); $("#bottomtip").tooltip({ placement: "bottom" }); $("#lefttip").tooltip({ placement: "left" }); $("#righttip").tooltip({ placement: "right" }); }); </ script > </ head > < body > < center > < div class = "container" > < h1 >< u >Bootstrap Tooltip Demo</ u ></ h1 > < br />< br /> < div > < button type = "button" id = "toptip" class = "btn btn-danger" title = "A Tooltip with Top placement" > Top Tooltip demo </ button > < br >< br > < button type = "button" id = "bottomtip" class = "btn btn-info" title = "A Tooltip with Bottom placement" > Bottom Tooltip demo </ button > < br >< br > < button type = "button" id = "lefttip" class = "btn btn-success" title = "A Tooltip with Left placement" > Left Tooltip demo </ button > < br >< br > < button type = "button" id = "righttip" class = "btn btn-warning" title = "A Tooltip with Right placement" > Right Tooltip demo </ button > </ div > </ body > </ html > |
Producción:
Publicación traducida automáticamente
Artículo escrito por mohitgouti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA