todas - ¿Es posible formatear una información sobre herramientas HTML(atributo de título)?
etiquetas html ejemplos (11)
En la sugerencia de herramienta de arranque simplemente use data-html = "true"
¿Es posible formatear una información sobre herramientas HTML?
Por ejemplo, tengo un DIV con atributo title = "¡foo!". Cuando tengo el tamaño de texto de mi navegador ampliándose o acercándose, el tamaño del texto de la información sobre herramientas permanece sin cambios. ¿Hay alguna manera de hacer que la escala de la fuente de información se escale con la configuración del navegador?
Escribí esta pequeña función de JavaScript que convierte todas las sugerencias de tu título nativo en nodos estilizados: http://jsfiddle.net/BurakUeda/g8r8L4vt/1/
mo_title = null;
mo_element = null;
document.onmousemove = function (e) {
var event = e || window.event;
var current_title;
var moposx = e.pageX; // current
var moposy = e.pageY; // mouse positions
var tooltips = document.getElementById("tooltips"); // element for displaying stylized tooltips (div, span etc.)
var current_element = event.target || event.srcElement; // the element we''re currently hovering
if (current_element == mo_element) return; // we''re still hovering the same element, so ignore
if(current_element.title){
current_title = current_element.title;
} else {
current_title = "-_-_-"; // if current element has no title,
current_element.title = "-_-_-"; // set it to some odd string that you will never use for a title
}
if(mo_element == null){ // this is our first element
mo_element = current_element;
mo_title = current_title;
}
if(mo_title) mo_element.title = mo_title; // restore the title of the previous element
mo_element = current_element; // set current values
mo_title = current_title; // as default
if(mo_element.title){
var mo_current_title = mo_element.title; // save the element title
mo_element.title = ""; // set it to none so it won''t show over our stylized tooltip
if(mo_current_title == "-_-_-"){ // if the title is fake, don''t display it
tooltips.style.display = "none";
tooltips.style.left = "0px";
tooltips.style.left = "0px";
tooltips.innerHTML = "";
} else {
tooltips.style.display = "inline-block";
tooltips.style.left = (moposx + 10) + "px";
tooltips.style.top = (moposy + 10) + "px";
tooltips.innerHTML = mo_current_title;
}
}
};
#tooltips {
display: none;
position: absolute;
left 0;
top: 0;
color: white;
background-color: darkorange;
box-shadow: black 2px 2px 2px;
padding: 5px;
border-radius:5px;
}
#buttoncontainer{
border: 1px black solid;
padding: 10px;
margin: 5px;
}
<div id="tooltips"></div>
<div>
<div title="DIV #1">Division 1</div>
<div id="buttoncontainer" title="Button container">
<button title="Button with title"> Button #1 </button>
<button> Button w/o title </button>
<button title="
<table border=''1'' cellpadding=''4'' cellspacing=''0''>
<tr>
<td style=''background-color:black; color:white; font-weight:bold; text-align: right''> TITLE #1</td>
<td style=''text-decoration:underline; color:RoyalBlue; font-style: italic; font-size: 18px''>Description 1</td>
</tr>
<tr>
<td style=''background-color:black; color:white; font-weight:bold; text-align: right''> TITLE #2</td>
<td style=''text-decoration:overline; color:RoyalBlue; font-weight:bold; font-size: 14px''>Description 1</td>
</tr>
<tr>
<td style=''background-color:black; color:white; font-weight:bold; text-align: right''> TITLE #3</td>
<td style=''text-decoration:line-through; color:RoyalBlue; font-style: italic; font-size: 12px''>Description 1</td>
</tr>
</table>
"> Button title containing HTML </button>
</div>
</div
Pros:
- No tienes que convertir nada. Simplemente escriba su HTML habitual con atributos de título nativos.
- Puede usar etiquetas HTML y estilo en línea en la información sobre herramientas del título. (Vea el ejemplo con una tabla HTML completa en un título con su propio estilo)
Contras:
- Es javascript
- No probado en todos los navegadores existentes, pero funciona bien con las últimas versiones de Chrome, FF, IE y Opera
Probablemente se puede escribir de forma más elegante y puede tener algunas líneas innecesarias.
Además, code snippet thingy no puede analizar el código HTML correctamente, así que compruébalo en el enlace jsfiddle que proporcioné.
Mejor tarde que nunca, siempre dicen.
Normalmente usaría jQuery para resolver tal situación. Sin embargo, cuando trabajé en un sitio para un cliente que requería una solución sin Javascript, se me ocurrió lo siguiente:
<div class="hover-container">
<div class="hover-content">
<p>Content with<br />
normal formatting</p>
</div>
</div>
Al usar el siguiente CSS, obtienes la misma situación que con un título:
.hover-container {
position: relative;
}
.hover-content {
position: absolute;
bottom: -10px;
right: 10px;
display: none;
}
.hover-container:hover .hover-content {
display: block;
}
Esto le da la opción de diseñarlo de acuerdo con sus necesidades también, y funciona en todos los navegadores. Incluso aquellos en los que javascript está deshabilitado.
Pros:
- Usted tiene mucha influencia en el diseño
- Funciona en (casi) todos los navegadores
Contras:
- Es más difícil posicionar la información sobre herramientas
No es posible. Pero puede usar algunas bibliotecas de JavaScript para crear dicha información sobre herramientas, por ejemplo, http://www.taggify.net/
No estoy seguro si funciona con todos los navegadores o herramientas de terceros, pero he tenido éxito simplemente especificando "/ n" en información sobre herramientas para newline, funciona con dhtmlx en al menos ie11, firefox y Chrome
for (var key in oPendingData) {
var obj = oPendingData[key];
this.cells(sRowID, nColInd).cell.title += "/n" + obj["ChangeUser"] + ": " + obj[sCol];
}
No, no es posible, los navegadores tienen sus propias formas de implementar información sobre herramientas. Todo lo que puedes hacer es crear algo de div que se comporte como una información sobre herramientas HTML (en su mayoría es solo ''mostrar al pasar el mouse'') con Javascript, y luego darle el estilo que desees.
Con esto, no tendrías que preocuparte por el acercamiento o alejamiento del navegador, ya que el texto dentro de la información sobre herramientas div es un HTML real, se escalaría en consecuencia.
Vea la post de Jonathan para un buen recurso.
No. Pero hay otras opciones como Overlib y jQuery que te permiten esta libertad.
- jTip: http://www.codylindley.com/blogstuff/js/jtip/
- jQuery Tooltip: https://jqueryui.com/tooltip/
Personalmente, sugeriría jQuery como la ruta a seguir. Por lo general, es muy discreto y no requiere configuración adicional en el marcado de su sitio (con la excepción de agregar la etiqueta de script jquery en su <head>).
Sé que esta es una publicación anterior, pero me gustaría agregar mi respuesta para referencia futura. Uso jQuery y css para dar estilo a mi información sobre herramientas: easy-tooltip-and-image-preview-using-jquery (para una demostración: http://cssglobe.com/lab/tooltip/02/ ) En mis sitios web estáticos esto solo funcionó estupendo. Sin embargo, durante la migración a Wordpress se detuvo. Mi solución fue cambiar las etiquetas como <br> and <span> en esto: <br> and <span> <br> and <span> Esto funciona para mí
parece que puedes usar css y un truco (no javascript) para hacerlo:
http://davidwalsh.name/css-tooltips
http://www.menucool.com/tooltip/css-tooltip
Mootools también tiene una buena clase ''Consejos'' disponible en su ''más constructor''.
Intenta usar códigos de entidades como 
 para CR, 
 para LF, y 	 para TAB.
Por ejemplo:
<div title="1)	A
2)	B">Hover Me</div>