Ajouter un saut de ligne dans les info-bulles


170

Comment ajouter des sauts de ligne dans une info-bulle HTML?

J'ai essayé d'utiliser <br/>et \ndans l'info-bulle comme suit:

<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>

Cependant, c'était inutile et je pouvais voir le texte littéral <br/>et \ndans l'info-bulle. Toutes les suggestions seront utiles.


3
J'ai eu la même question: stackoverflow.com/questions/3320081/...
San

1
utilisez <pre> data-html = "true" </pre> Ref et merci à: stackoverflow.com/a/19001875/2278891
Dimanche

Dans asp.net (C # .NET 4.5 Framework), l'ajout de Environment.NewLinetravaux pour ajouter un saut de ligne du côté code ... pas de chichi ... pas de problème ...
Dan B

Réponses:


271

Utilisez simplement le code d'entité &#013;pour un saut de ligne dans un attribut de titre.


17
si le code d'entité & # 013; ne fonctionne pas, essayez & # 10; J'utilise linux et chrome pas sûr des autres navigateurs
Krishna

3
J'ai essayé cela et cela fonctionne lorsque je l'injecte en utilisant un élément inspect, mais pas lorsque je l'inclus dans mon html et le déploie avec ce caractère. Une raison évidente pour laquelle je pourrais manquer?
Riaan Schutte

1
Pour moi, je &#10ne travaille pas pour moi dans Windows, Chrome v53. Mais &#013;a bien fonctionné.
Lucky

9
Je viens d'utiliser les deux versions, &#013;&#010;semble fonctionner assez bien :)
Phe0nix

6
& # 013; ne fonctionne pas dans Firefox v58. Cependant, & # 10 fonctionne bien. L'utilisation de la solution @ Phe0nix consistant à utiliser les deux sauts de ligne selon les besoins fonctionne bien pour la faire fonctionner dans Chrome, Microsoft Edge et Firefox.
Pretty Cool

69

Ajoutez simplement un attribut de données

data-html = "vrai"

et vous êtes prêt à partir.

Par exemple. usage:

<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow" </i>

Cela a fonctionné dans la majorité des plugins d'info-bulles que j'ai essayés à ce jour.


3
data-html = "true" avec <br /> dans le texte du titre fonctionne parfaitement.
viks

1
Aucune des solutions ci-dessus n'a fonctionné pour moi. Mais celui-ci fonctionne bien.
abby

64

Le &#013;combiné avec le style espace blanc: pré-ligne; travaillé pour moi.


3
J'ai passé un certain temps à essayer de faire fonctionner cela. Le fait que le white-space: pre-line;style soit nécessaire est très caché.
Jim D

@JimD à quelle classe / élément la règle de style doit-elle être appliquée?
Judah Meek

Pour moi, cela fonctionne bien sans css personnalisé sur les info-bulles.
ST-DDT

2
C'est celui que vous cherchez des amis.
Henrik Petterson

3
En fait, le personnage devrait être &#010;: stackoverflow.com/questions/6502054/…
Henrik Petterson


11
\n

avec le style

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

travaillé pour moi.


10

Donnez \nentre le texte. Cela fonctionne sur tous les navigateurs.

Example 
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";

Cela fonctionnera pour moi et il est utilisé dans le code derrière.

J'espère que cela fonctionnera pour vous


4

Je l'ai trouvé. Cela peut être fait simplement en faisant comme ça

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>

4

La version javascript

Puisque &#013;(html) est 0D(hex), cela peut être représenté par'\u000d'

str = str.replace(/\n/g, '\u000d');

En outre,

Partager avec vous les gars un filtre AngularJS qui remplace \nce personnage grâce aux références dans les autres réponses

app.filter('titleLineBreaker', function () {
    return function (str) {
        if (!str) {
            return str;
        }

        return str.replace(/\n/g, '\u000d');
    };
});

usage

<div title="{{ message | titleLineBreaker }}"> </div>

4

utilisez simplement \ n dans le titre et ajoutez ce css

.tooltip-inner {
    white-space: pre-wrap;
}


3

Ajoutez simplement data-html = "true"

<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>

2

il est possible d'ajouter des sauts de ligne dans les info-bulles HTML natives en répartissant simplement l'attribut title sur plusieurs lignes.

Cependant, je recommanderais d'utiliser un plugin d'info-bulle jQuery tel que Q-Tip: http://craigsworks.com/projects/qtip/ .

Il est simple à installer et à utiliser. Alternativement, il existe également de nombreux plugins d'info-bulles javascript gratuits.

edit: correction sur la première déclaration.


2

Pour moi, une solution en 2 étapes (combinaison de mise en forme du titre et d'ajout du style) a fonctionné, comme suit:

1) Formatez l' titleattrbiute:

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>

2) Ajoutez ce style à l' tipsélément:

white-space: pre-line;

Testé dans IE8, Firefox 22 et Safari 5.1.7.


Je pense que c'est compliqué d'avoir des lignes brisées dans le code
Fandango68

2

Ajoutez simplement cet extrait de code dans votre script:

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

et bien sûr, comme mentionné dans les réponses ci-dessus, le data-htmldevrait être "true". Cela vous permettra d'utiliser des balises html et une mise en forme à l'intérieur de la valeur de l' titleattribut.


+1, votre solution a fonctionné. mon exemple de code: data-toggle="tooltip" data-html="true" title="some string <br/> some string".
Pranesh Janarthanan

C'est bon d'entendre ça
le

1

Eh bien, si vous utilisez l' utilitaire Jquery Tooltip , dans le fichier Javascript "jquery-ui.js", trouvez le texte suivant:

tooltip.find(".ui-tooltip-content").html(content);

et mettre au dessus

content=content.replace(/\&lt;/g,'<').replace(/\&gt;/g,'>');

J'espère que cela fonctionnera également pour vous.


1

Donc, si vous utilisez bootstrap4, cela fonctionnera.

<style>
   .tooltip-inner {
    white-space: pre-wrap;
   }

</style>

<script> 
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
</script>

<a data-toggle="tooltip" data-placement="auto" title=" first line &#010; next line" href= ""> Hover me </a>

Si vous utilisez dans un projet Django, nous pouvons également afficher des données dynamiques dans des info-bulles telles que:

<a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto"  title="{{ post.location }} &#010; {{ post.updated_on }}" href= "{% url 'blog:get_user_profile' post.author.id %}">{{ post.author }}</a>

0

La solution pour moi était http://jqueryui.com/tooltip/ :

Et voici le code (la partie du script qui crée <br/>Works est "content:"):

HEAD HTML

<head runat="server">
    <script src="../Scripts/jquery-2.0.3.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
    /*Position:
      my =>  at
      at => element*/
    $(function () {
        $(document).tooltip({
            content: function() {
                var element = $( this );
                if ( element.is( "[title]" ) ) {
                    return element.attr( "title" );
                }

            },
            position: { my: "left bottom-3", at: "center top" } });
    });
</script>
</head>

Contrôle ASPX ou HTML

<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>

J'espère que ça aide quelqu'un


0

Plus grand que Jquery UI 1.10 n'est pas pris en charge pour utiliser la balise html à l'intérieur de l'attribut title car son code HTML n'est pas valide.

La solution alternative consiste donc à utiliser l'option de contenu de l'infobulle. Reportez-vous - http://api.jqueryui.com/tooltip/#option-content



0

si vous utilisez jquery-ui 1.11.4:

var tooltip = $.widget( "ui.tooltip", {
    version: "1.11.4",
    options: {
        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
Replace-->  //return $( "<a>" ).text( title ).html();
by -->      return $( "<a>" ).html( title );
             },

0
AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:

uib-tooltip, uib-tooltip-template et uib-tooltip-html

- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template

Dans mon cas, j'ai opté pour uib-tooltip-html et il comporte trois parties:

  1. configuration
  2. manette
  3. HTML

Exemple:

(function(angular) {

//Step 1: configure $sceProvider - this allows the configuration of $sce service.

angular.module('myApp', ['uib.bootstrap'])
       .config(function($sceProvider) {
           $sceProvider.enabled(false);
       });

//Step 2: Set the tooltip content in the controller

angular.module('myApp')
       .controller('myController', myController);

myController.$inject = ['$sce'];

function myController($sce) {
    var vm = this;
    vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
                                         'I am the second line-break');

    return vm;
}

 })(window.angular);

//Step 3: Use the tooltip in HTML (UI)

<div ng-controller="myController as get">
     <span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>

Pour plus d'informations, veuillez vérifier ici


0

Utiliser .html () au lieu de .text () a fonctionné pour moi. Par exemple

.html("This is a first line." + "<br/>" + "This is a second line.")

0

l'utilisation &#13;devrait fonctionner (j'ai testé dans Chrome , Firefox et Edge ):

let users = [{username: 'user1'}, {username: 'user2'}, {username: 'user3'}];
let favTitle = '';
for(let j = 0; j < users.length; j++)
    favTitle += users[j].username + "&#13;";

$("#item").append('<i title="In favorite users: &#13;' + favTitle + '">Favorite</i>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>


0

Salut ce code fonctionnera dans tous les navigateurs !! J'ai utilisé pour la nouvelle ligne dans chrome et safari et ul li pour IE

 function genarateMultiLIneCode(){
        var =values["a","b","c"];
        const liStart = '<li>';
              const liEnd = '</li>';
              const bullet = '&#8226; ';     
              var mergedString = ' ';
              const unOrderListStart='<ul>'
              const unOrderListEnd='</ul>'
              const fakeNewline = '&#013;&#010;';
              for (let i = 0; i < values.length; i++) {
                   mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
              }
              const tempElement = document.createElement("div");
              tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;    
              return tempElement.innerText;
            }
        }

0

Vous pouvez utiliser l'info-bulle de bootstrap et n'oubliez pas de définir l'option html sur true.

<div id="tool"> tooltip</div>
$('#tool').tooltip({
     title: 'line one' +'<br />'+ 'line two',
     html: true
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

-1

Utilisez simplement le code d'entité &#xA;pour un saut de ligne dans un attribut de titre.

<a title="First Line &#xA;Second Line">Hover Me </a>


-1

Ce css vous aidera.

    .tooltip {
      word-break: break-all;
    }

or if you want in one line

    .tooltip-inner {
      max-width: 100%;
    }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.