Affichage du texte long dans L'infobulle Bootstrap

Question

Affichage du texte long dans L'infobulle Bootstrap

J'essaie d'afficher un peu de texte long dans une info-bulle twitter bootstrap. Comme vous pouvez le voir dans l'image ci-dessous, les choses ne vont pas smashingly. Est-ce que quelqu'un a une solution facile pour le texte qui déborde l'info-bulle bootstrap?

débordement d'info-bulle

Modifier (code demandé ajouté):

Dans mon contrôleur:

<a href='" + Url.Action("Index", "PP", new {id = productRow.ProductGuid, area = ""}) + "' " + 
          ((blTruncated) ? "class='auto-tooltip' title='" + productRow.ProductName.Replace("'", "") : "") + "'>" + 
           productName + "</a>

À mon avis:

$('.auto-tooltip').tooltip();

46

css jquery twitter-bootstrap

demandé sur Jeff Borden 2013-08-29 21:34:18

4 réponses

score 92 · Answer 1

Je ne suis pas tout à fait sûr de votre code,
voici un exemple avec une valeur d'info-bulle longue:

Élément:

 <a href="#" rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Hover here please</a>

Js:

$(document).ready(function () {
  $("a").tooltip({
    'selector': '',
    'placement': 'top',
    'container':'body'
  });
});

Css:

/*Change the size here*/
div.tooltip-inner {
    max-width: 350px;
}

Démonstration: sur JsBin.com

score 27 · Answer 2

Comme indiqué à dans la documentation , le moyen le plus simple de s'assurer que votre info-bulle ne s'encapsule pas du tout est d'utiliser

        .tooltip-inner {
            max-width: none;
            white-space: nowrap;
        }

Avec ceci, vous n'avez pas à vous soucier des valeurs de dimension ou quelque chose comme ça. Le problème principal étant que si vous avez une super longue ligne de texte, elle disparaîtra de l'écran (comme vous pouvez le voir dans l'exemple Jsbin).

score 5 · Answer 3

Vous pouvez utiliser cette source pour de meilleurs résultats:

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

score 2 · Answer 4

Comme alternative au style du .tooltip-inner dans une feuille de style, vous pouvez ajouter des styles directement à l'info-bulle en modifiant le modèle de l'info-bulle.

Ce n'est probablement pas une bonne idée dans la plupart des cas puisque vous appliqueriez des styles directement à l'élément, mais il est à noter que cela est possible pour les quelques cas où c'est la seule option ou pour une raison quelconque est la meilleure option.

$(selector).tooltip({
  title: "Lorem ipsum ...",
  template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>',
});

Ou, en tant qu'attribut:

<span
  data-toggle="tooltip"
  title="Lorem ipsum ..."
  data-template='<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>'
  >Some abbreviation</span>

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

template option:

Base HTML à utiliser lors de la création de l'info-bulle.

L'info-bulle title sera injectée dans le .tooltip-inner.

.tooltip-arrow deviendra la flèche de l'infobulle.

L'élément wrapper le plus externe doit avoir la classe .tooltip.

Par Défaut:

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Comme alternative, vous pouvez ajouter votre propre classe au Modèle et le style de la classe personnalisée.

$(selector).tooltip({
  title: "Lorem ipsum ...",
  template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner my-custom-tooltip"></div></div>',
});

.my-custom-tooltip {
  max-width: none;
}

Las etiquetas más populares

Affichage du texte long dans L'infobulle Bootstrap

4 réponses