web-dev-qa-db-fra.com

info-bulle jQuery ajouter un saut de ligne

Donc, je veux prendre le contenu d'un div dans lequel j'ai plusieurs <br/>, puis passez-le comme attribut title à l'aide du widget info-bulle jQuery. Je veux que les lignes apparaissent l'une sous l'autre à l'intérieur de l'infobulle. THX. le code est jusqu'à présent:

CSS 

.Lines {
    width: 125px;
    height:20px;
    overflow:auto;
}

JavaScript

$(function () {
    $(document).tooltip();

    $(".Lines").hover(function () {
        IaTxt = $(this).html()

        $(this).prop('title', IaTxt)

    })
});

HTML 

<div class="Lines">
    First line.
    <br/>Second line.
    <br/>Third line!
    <br/>Fourth line?
</div>
javascriptjqueryhtmljquery-uijquery-plugins
23
ChrisGP

Vous pouvez utiliser l'option "contenu" du widget info-bulle. Voir également:

http://jqueryui.com/tooltip/#custom-content

Petit exemple:

  $(function() {
    $( document ).tooltip({
      content: function() {
        return 'foo'
      }
    });
  });
10
Teun Lassche

Il existe une pure solution CSS. Utilisez\n pour les retours à la ligne et ajoutez ce style CSS:

.ui-tooltip {
    white-space: pre-line;
}

Vous pouvez également utiliser le pré ou le pré-emballage au lieu de la pré-ligne, si vous souhaitez conserver les espaces. Voir https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

54
zooglash

C'est mon astuce pour le faire avec le dernier jquery/jqueryui (en supposant 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 />')); 
  }
});
15
Scott R. Frost

utilisez simplement l'entité &#10; pour un saut de ligne dans un attribut title.

15
Ravi Gadag

Vous pouvez saisir votre code HTML directement dans l'attribut Title, puis appeler simplement ce qui suit:

$(document).tooltip({
  content: function (callback) {
     callback($(this).prop('title'));
  }
});

De cette façon, votre code HTML est rendu au lieu d'être échappé et écrit littéralement.

6
JDandChips

mieux utiliser ceci:

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

avec function(callback) j'ai eu un problème avec les info-bulles qui n'étaient pas proches

3
user3411211

Je suis allé avec une version modifiée de la réponse de ScottRFrost. Le problème avec son exemple est que .replace ne remplace que la première instance du caractère dans la chaîne. Voici une version modifiée qui utilisera le regex/g (global) pour modifier toutes les instances du caractère dans la chaîne entière.

$('.jqtooltip').tooltip({ 
   content: function (callback) {
      callback($(this).prop('title').replace(new RegExp("\\|", "g"), '<br />'));
   }
});
2
LukeP

J'ai utilisé ceci:

        $("[title]").each(function(){
            $(this).tooltip({ content: $(this).attr("title")});
        });

Cela signifie que tous les éléments avec un attribut title vont utiliser l'info-bulle jquery et le contenu de l'info-bulle utilisera la valeur de l'attribut title. Le contenu autorise le HTML.

2
Ronen Festinger