Inicializar información sobre herramientas con JQueryUI

HTML:

<input type='text' id='uname' />

JS:

$( "#uname" ).tooltip({ content: "gggg" });

Resultado: nada. Sin información sobre herramientas, sin errores; ¿Que esta mal aquí?

Demostración: http://jsfiddle.net/w97FA/

Estos son los recursos/complementos que utilicé:

preguntado el 16 de abril de 13 a las 08:04

4 Respuestas

La información sobre herramientas se coloca como un título:

<input type='text' id='uname' title="gggg" />

http://jsfiddle.net/samliew/w97FA/2/

De lo contrario, debe inicializar el elemento con un título vacío para configurarlo dinámicamente:

<input type='text' id='uname' title='' />

http://jsfiddle.net/samliew/w97FA/8/

Respondido 16 Abr '13, 08:04

Samuel Liew, entonces necesito agregar title=''? eso es una locura En realidad, estoy escribiendo complementos, por lo que tendré que insertarlos con JS. Pero sí, está funcionando ahora. - Qiao

La documentación no dice nada al respecto. api.jqueryui.com/tooltip/#option-content . Dice `Predeterminado: función que devuelve el atributo de título`. - Qiao

El resultado es: $( '#uname' ).attr( 'title', '' ).tooltip({ 'content': 'gggg' });. JQuery tiene un pequeño lío aquí. - Qiao

A este tenor, Documentación de la API para los estados de información sobre herramientas, si usa la opción "contenido", también necesita usar la opción de elementos, por lo que funciona el siguiente código:

$('#uname').tooltip({ content: "Awesome title!", "items":"input" })

Sin embargo, si no necesita una lógica específica para el contenido que se muestra, o alguna selección sofisticada, el uso del atributo de título puede ser más simple.

Respondido 16 Abr '13, 08:04

esta es una implementación de API realmente extraña, pero también funciona: samuel liew

Sí, ahora lo veo, api.jqueryui.com/tooltip/#option-items "Personalice si está usando algo que no sea el atributo de título para el contenido de información sobre herramientas". Pero esto no es bueno para mi caso, porque cualquier elemento debe tener información sobre herramientas, no solo input. - Qiao

... you likely need to also change the items option. "Probable". JAJAJA - Tim

  <script src="js/tooltips.js"></script>
   <script>
       $(function () {
           $("#page-wrap a[title]").tooltips();
       });
   </script>     

USE JQUERY TOOLTIP CON CSS EN LA APLICACIÓN WEB ASP.NET. Aquí también podemos usar css para definir el estilo de la información sobre herramientas. Para obtener un ejemplo completo [marque aquí] [1]

respondido 06 nov., 14:10

Sé que esta publicación es antigua, pero pensé que esto podría ayudar a alguien con un problema similar. He estado revisando un código antiguo que usa información sobre herramientas y no se representaba cuando inicialmente pasaba el cursor sobre el elemento especificado. Probé muchas soluciones diferentes y no pude hacer que se renderizara correctamente. Finalmente encontré la solución que funcionó para mí, que era simplemente agregar un espacio en el atributo de título en blanco. Una vez que hice eso, todo funcionó como se suponía que debía hacerlo:

//get all elements with classname tooltip
var toolTipElements = document.getElementsByClassName('tooltip');

//initialize tool tips using classname
if(toolTipElements){
  [].forEach.call(toolTipElements, function(element){  
    $(element).tooltip({
      items: 'input',
      show: false,
      hide: false,
      track: true,
    });
    
    //add mouseover event listener to element that is supposed to display tool tip
    element.addEventListener('mouseover', function(){
      renderToolTip(element, true);    
    });
  });  
}

//render tool tip with message
function renderToolTip(element, withTracking){
  $(element).tooltip({
        items: 'input',
        show: false,
        hide: false,
        track: withTracking,
        content: function(callback){
          var toolTipMessage = 'Hello From ' + element.id +' Tool Tip!';          
          callback(toolTipMessage);
        }
    });
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<div>
  <input id="inputElementWithOutSpace" class="tooltip" title=""/>
</div>
<div style='padding-top:12px;'>
  <input id="inputElementWithSpace" class="tooltip" title=" "/>
</div>

Respondido 04 Feb 19, 22:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.