web-dev-qa-db-fra.com

Comment rompre la ligne dans l'info-bulle jQueryUI

La nouvelle version de jQueryUI (1.9) est livrée avec le widget info-bulle natif. Après l'avoir testé, cela fonctionne bien si le contenu (valeur de l'attribut title) est court. Mais si le contenu est long, l'infobulle, une fois affichée, chevauchera le texte saisi.

Il y a une démo sur le site officiel.

Lorsque vous passez le curseur de la souris sur le Votre âge texte <input>, l'info-bulle affichée chevauche la saisie de texte. Je ne suis pas sûr que ce soit le comportement souhaité du widget. Je voudrais qu'il reste sur le côté droit de la saisie de texte et casse les lignes si nécessaire.

Edit: La page de démonstration ne montre plus le problème d'origine puisque la démo a été mise à jour pour utiliser jQueryUI v1.10 dans laquelle la position le code a été mis à jour pour mieux placer l'infobulle - voir http://api.jqueryui.com/tooltip/#option-position

J'ai recréé un démo du problème d'origine sur jsFiddle .

jqueryjquery-uitooltip
28
woraphol.j

Le placement de l'info-bulle est contrôlé par un objet jQueryUI Position et les paramètres par défaut sont:

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

L'objet Position , en particulier l'attribut collision peut être modifié pour forcer le placement du contrôle ailleurs . La valeur par défaut pour les info-bulles est flipfit ce qui signifie que si la valeur par défaut (à droite) ne correspond pas, elle sera flip vers la gauche et essayez cette position et si qui n'entre en collision avec rien, essayez de fit le contrôle en l'éloignant du bord de la fenêtre. Le résultat est qu'il entre maintenant en collision avec le <input>. Il ne semble pas y avoir d'option pour forcer une longue info-bulle à envelopper intelligemment.

Cependant, il existe deux façons d'envelopper le contenu:

Ajoutez une classe CSS personnalisée à la configuration avec un max-width Pour forcer l'habillage, par exemple:

Javascript

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

CSS

.tooltip {
    max-width:256px;
}

Ou insérez des sauts de ligne durs <br/> Dans l'attribut title, par exemple

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

Edit: Il semble donc que jQueryUI ait changé l'option info-bulle content entre v1.9 et v1.10 (selon le changelog ). Pour référence, voici la différence:

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

Vous pouvez donc remettre les anciennes fonctionnalités qui n'échappent pas aux balises <br/> Dans l'attribut title en utilisant la fonction .tooltip() comme ceci:

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

Voir aussi démo jsFiddle .

52
andyb

C'est mon astuce pour le faire avec le dernier jquery/jqueryui

Cela suppose que tous les éléments que vous souhaitez avoir des info-bulles ont la classe "jqtooltip", ils ont des balises de titre et le titre a un caractère de tuyau pour un séparateur de ligne.

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

J'ai une solution pour jQuery 2.1.1, similaire à la solution de @ Taru.

Fondamentalement, nous devons utiliser l'appel de contenu de l'info-bulle pour obtenir dynamiquement les données de l'élément. L'élément lui-même peut contenir n'importe quel balisage html. Notez que vous devez importer

Donc, onload, je fais ceci:

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

Et mon exemple d'élément est le suivant:

<div title="first<br/>second<br/>">hover me</div>
12
ivan-k

Cela marche:

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"
    }
});
2
Taru