Aligner l'info-bulle Bootstrap sur la gauche de l'élément?

Je suis en utilisant Bootstrap est info-bulle script et ont un problème quand j'ai une info-bulle sur le texte que soit tronquée. Je suis à l'aide de CSS pour tronquer le texte, et ensuite, une info-bulle sur ce texte de sorte que vous pouvez la souris pour voir le texte intégral. Mon problème est que lorsque le texte est tronqué, l'info-bulle est toujours centrée sur l'élément, comme si il n'était pas tronquée.

À côté de cette question, j'aimerais plutôt être de style comme la suite de toute façon. Je voudrais avoir si l'info-bulle s'aligne sur la gauche de l'élément, et la flèche sur l'info-bulle va à gauche. Ou si l'info-bulle est sur le côté de l'élément, alors il est aligné sur le haut et la flèche est sur le dessus.

Fondamentalement, il ressemble à ceci maintenant:

             ################
             # TOOLTIP      #
             ################
                    v
Some really long text th...

Je voudrais qu'elle ressemble à ceci:

################
# TOOLTIP      #
################
 v
Some really long text th...

Ou sur le côté comme ceci:

################ > Some really long text th...
# TOOLTIP      #
################

Merci.

[EDIT] j'ai firgured le mouvement de la flèche, ce qui n'est qu'un simple css. Mais l'alignement de l'info-bulle elle-même semble faire partie du javascript.

source d'informationauteur BlueCaret

  1. 7

    Je pense que vous aurez besoin d'ajuster la tooltip-arrow CSS et la position de l'ensemble de la tooltip. Ainsi, vous obtenez près de lui, mais il peut avoir besoin de plus de réglages...

    .info-bulle-flèche CSS

    .tooltip.right .tooltip-arrow{
    top: 5%;
    margin-top: 0px;
}

.tooltip.top .tooltip-arrow{
    left: 6%;
    bottom:1px;
}

    fonction jQuery pour ajuster le placement de l'info-bulle..

    $("[data-placement=right]").hover(function(){
    $('.tooltip').css('top',parseInt($('.tooltip').css('top')) + 8 + 'px')
});

    Démo sur Bootply

    EDIT: Vous pouvez aussi positionner l' .info-bulle avec CSS. Suppléant de démonstration

    .tooltip.right {
    margin-top:8px;
}
  2. 0

    Pour réaliser la mise en page suivante:

              element
             ^
################
# TOOLTIP      #
################

    CSS

    .tooltip.bottom .tooltip-arrow {
  left: 90% !important;
}

    JS

    $('[data-toggle=tooltip]').on('inserted.bs.tooltip', function() {
  $('.tooltip').css('opacity', 0);
});

$(''[data-toggle=tooltip]'').on('shown.bs.tooltip', function() {
  var $tooltip = $('.tooltip');
  $tooltip.css('left', $tooltip.offset().left - $tooltip.width() / 2);
  $tooltip.css('opacity', 1);
});

    Il y a un petit retard dû à masquer et afficher l'info-bulle, mais le positionnement fonctionne très bien quelle que soit la taille de l'infobulle.