bootstrap - Cómo dividir la línea en jQueryUI tooltip

tooltip jquery

Question

La nueva versión de jQueryUI (1.9) viene con el widget de información sobre herramientas nativa. Después de probar con él, funciona bien si el contenido (valor del atributo de título) es corto. Pero si el contenido es largo, la información sobre herramientas, una vez visualizada, se superpondrá al texto de entrada.

Hay una demo en el sitio oficial.

Cuando coloca el cursor del mouse sobre el texto de Su edad <input> , la información sobre herramientas que se muestra se superpone a la entrada de texto. No estoy seguro de si este es el comportamiento deseado del widget. Me gustaría que permanezca en el lado derecho de la entrada de texto y rompa líneas si es necesario.

Editar: La página de demostración ya no muestra el problema original ya que la demostración se ha actualizado para usar jQueryUI v1.10 en el que se actualizó el código de posición para ubicar mejor la información sobre herramientas; consulte http://api.jqueryui.com/tooltip/#option-position

He vuelto a crear una demostración del problema original en jsFiddle .

Answer 1

Este es mi truco para hacerlo con los últimos jquery / jqueryui

Se asume que todos los elementos que desea que los tooltips tengan clase ''jqtooltip'', tienen etiquetas de título y el título tiene un carácter de canal para un separador de línea.

$(''.jqtooltip'').tooltip({ 
  content: function(callback) { 
     callback($(this).prop(''title'').replace(''|'', ''<br />'')); 
  }
});

Answer 2

Esto funciona:

HTML

<div class="produtos">
    <div class="produtos_imagem">
        <img src="imagens/teste/7.jpg" width="200" title="Código: 00122124<br /><br />Descrição: AB PNEU 700 X 23 FOLD CORPRO<br /><br />Unidade: PN<br /><br />Marca : PNEU"/>
    </div>
    <p class="produtos_titulo">AB PNEU 700 X 23 FOLD CORPRO</p>
</div>

JavaScript

$(document).tooltip({
    content: function() {
        var element = $( this );
        if ( element.is( "[title]" ) ) {
            return element.attr( "title" );
        }
    },
    position: {
        my: "center bottom-20",
        at: "center top"
    }
});

Answer 3

La http://api.jqueryui.com/tooltip/#option-position de la información sobre herramientas está controlada por un objeto Posición jQueryUI y la configuración predeterminada es:

{ my: "left+15 center", at: "right center", collision: "flipfit" }

El objeto de Position , en particular el atributo de collision se puede cambiar para forzar la colocación del control en otro lugar. El valor predeterminado para la información sobre herramientas es flipfit, lo que significa que si el valor predeterminado (a la derecha) no cabe, se volteará hacia la izquierda y probará esa posición, y si eso no colisiona con nada, intente ajustar el control alejándolo de el borde de la ventana. El resultado es que ahora colisiona con la <input> . No parece haber una opción para obligar a una información sobre herramientas larga a envolver inteligentemente.

Sin embargo, hay dos formas de envolver el contenido:

Agregue una clase de CSS personalizada a la configuración con un max-width para forzar el ajuste, por ejemplo:

JavaScript

$(''input'').tooltip({
    tooltipClass:''tooltip''
});

CSS

.tooltip {
    max-width:256px;
}

O inserte saltos de línea difíciles <br/> en el atributo de título, por ejemplo

title="Lorem ipsum dolor sit amet,<br/>consectetur adipisicing elit"

Editar: Parece que jQueryUI cambió la opción de contenido de información sobre herramientas entre v1.9 y v1.10 (de acuerdo con el registro de cambios ). Como referencia aquí está la diferencia:

v1.9.2

content: function() {
    return $( this ).attr( "title" );
}

v1.10

content: function() {
    // support: IE<9, Opera in jQuery <1.7
    // .text() can''t accept undefined, so coerce to a string
    var title = $( this ).attr( "title" ) || "";
    // Escape title, since we''re going from an attribute to raw HTML
    return $( "<a>" ).text( title ).html();
}

Así que puedes volver a poner la funcionalidad anterior que no escapa <br/> etiquetas en el atributo del título usando el .tooltip() como este:

$(''input'').tooltip({
    content: function() {
        return $(this).attr(''title'');
    }
});

Además, vea la demostración jsFiddle .

Answer 4

Tengo una solución para jQuery 2.1.1, similar a la solución de @ Taru.

Básicamente, tenemos que usar la llamada de contenido de la sugerencia para obtener dinámicamente los datos del elemento. El elemento en sí puede tener cualquier marcado HTML. Tenga en cuenta que necesita importar

Entonces, onload, hago esto:

$(function() {
    $( document ).tooltip({
      content:function(){
        return this.getAttribute("title");
      }
    });
  });

Y mi elemento de ejemplo es este:

<div title="first<br/>second<br/>">hover me</div>