So brechen Sie die Zeile im jQueryUI-Tooltip um

Die neue Version von jQueryUI (1.9) kommt mit dem nativen Tooltip-Widget. Nach dem Testen funktioniert es gut, wenn der Inhalt (Wert des Titelattributs) kurz ist. Wenn der Inhalt jedoch lang ist, überlappt der Tooltip, sobald er angezeigt wird, den Eingabetext.

Es gibt eine Demo auf der offiziellen Seite.

Wenn Sie den Mauszeiger über die Ihr Alter Text <input>, überlagert der angezeigte Tooltip die Texteingabe. Ich bin mir nicht sicher, ob dies das gewünschte Verhalten des Widgets ist. Ich möchte, dass es auf der rechten Seite der Texteingabe bleibt und gegebenenfalls Zeilen umbricht.

Bearbeiten: Die Demoseite zeigt das ursprüngliche Problem nicht mehr, da die Demo aktualisiert wurde, um jQueryUI v1.10 zu verwenden, in dem die Position Code wurde aktualisiert, um den Tooltip besser zu platzieren – siehe http://api.jqueryui.com/tooltip/#option-position

Ich habe eine neu erstellt Demo des ursprünglichen Problems auf jsFiddle.

Das Platzierung des Tooltips wird durch ein jQueryUI-Positionsobjekt gesteuert und die Standardeinstellungen sind:

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

Das Position Objekt, insbesondere die collision -Attribut kann geändert werden, um die Platzierung des Steuerelements an einer anderen Stelle zu erzwingen. Der Standardwert für QuickInfos ist Flipfit Das heißt, wenn die Standardeinstellung (rechts) nicht passt, wird es passen kippen nach links und versuchen Sie diese Position, und wenn das mit nichts kollidiert, versuchen Sie es fit das Steuerelement, indem Sie es vom Rand des Fensters wegbewegen. Das Ergebnis ist, dass es jetzt mit dem kollidiert <input>. Es scheint keine Option zu geben, einen langen Tooltip geschickt umzubrechen.

Es gibt jedoch zwei Möglichkeiten, den Inhalt zu umschließen:

Fügen Sie der Konfiguration mit a eine benutzerdefinierte CSS-Klasse hinzu max-width Umwickeln zu erzwingen, zum Beispiel:

JavaScript

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

CSS

.tooltip {
    max-width:256px;
}

Oder fügen Sie harte Zeilenumbrüche ein <br/> im title-Attribut, zum Beispiel

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

Bearbeiten: Es sieht also so aus, als hätte jQueryUI den Tooltip geändert Inhalt Option zwischen v1.9 und v1.10 (gemäß das Änderungsprotokoll). Als Referenz hier der Unterschied:

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();
}

So können Sie die ältere Funktionalität zurücksetzen, die nicht entgeht <br/> Tags in der Titel Attribut mit dem .tooltip() so was:

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

Siehe auch jsFiddle-Demo.

Dies ist mein Trick, um es mit dem neuesten jquery / jqueryui zu tun

Es wird davon ausgegangen, dass alle Elemente, für die Sie QuickInfos haben möchten, die Klasse „jqtooltip“ haben, sie Titel-Tags haben und der Titel ein Pipe-Zeichen als Zeilentrenner hat.

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

Ich habe eine Lösung für jQuery 2.1.1, ähnlich der Lösung von @Taru.

Grundsätzlich müssen wir den Inhaltsaufruf von Tooltip verwenden, um die Daten dynamisch aus dem Element zu erhalten. Das Element selbst kann ein beliebiges HTML-Markup enthalten. Beachten Sie, dass Sie importieren müssen

Also, onload, ich mache das:

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

Und mein Beispielelement ist folgendes:

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

Das funktioniert:

HTML

<div class="produtos">
    <div class="produtos_imagem">
        <img src="https://stackoverflow.com/questions/13066909/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( "How to break line in jQueryUI tooltip" ) ) {
            return element.attr( "title" );
        }
    },
    position: {
        my: "center bottom-20",
        at: "center top"
    }
});

Gemäß der Dokumentation der offiziellen jQuery-Benutzeroberfläche https://api.jqueryui.com/tooltip/ Für das Tooltip-Widget (Version 1.13) habe ich diese Syntax verwendet, um einen HTML-Inhalt mit Zeilenumbrüchen festzulegen:

$( ".selector" ).tooltip( "option", "content", "1st line.<br />2nd line.<br />3rd line." );

Auf meiner Seite funktioniert es einwandfrei.
Funktioniert auch die von andyb hier bereitgestellte Lösung, die darauf abzielt, den Inhalt anhand des Werts des Titelattributs zu bewerten:

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