web-dev-qa-db-fra.com

Afficher le texte descriptif dans Bootstrap info-bulle

J'essaie d'afficher un long texte dans une info-bulle Twitter bootstrap). Comme vous pouvez le voir sur l'image ci-dessous, tout ne se passe pas bien. Quelqu'un a-t-il une solution facile pour le texte qui déborde du bootstrap info-bulle?

tooltip overflow

EDIT (ajouté le code demandé):

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();
jquerycsstwitter-bootstraptwitter-bootstrap-tooltip
47
Jeff Borden

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

Elé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émo: sur JsBin.com

Vous ne pouvez changer que le .tooltip-inner Dans Bootstrap 4, merci @ Félix Dombek

.tooltip-inner { max-width: ... }
95
funerr

Comme indiqué dans la documentation , le moyen le plus simple de s’assurer que votre infobulle n’est pas bouclée du tout est de l’utiliser.

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

Avec cela, vous n'avez pas à vous soucier des valeurs de dimension ou de ce genre de choses. Le problème principal est que si vous avez une très longue ligne de texte, il va simplement sortir de l'écran (comme vous pouvez le voir dans l'exemple de JSBin ).

28
cmcculloh

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

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

enter image description here

6
dr. Neox

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

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

$(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:

HTML de base à 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'info-bulle.

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

Par défaut à:

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

Au lieu de cela, vous pouvez ajouter votre propre classe au modèle et styliser 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;
}
2
Nate