Richten Sie im tooltip von Bootstrap zu der linken Seite des Elements?

Ich bin mit Bootstrap ist tooltip script und habe ein problem wenn ich den tooltip-text, der gekürzt wird. Ich bin mit CSS zu kürzen Sie den text, und dann ein tooltip auf, dass der text so können Sie mit der Maus über und finden Sie den vollständigen text. Mein problem ist, dass, wenn der text abgeschnitten wird, wird der tooltip immer noch mitten auf dem element, als wäre Sie nicht abgeschnitten.

Abgesehen von diesem Thema, ich würde nur lieber im Stil wie die folgenden sowieso. Ich möchte es so haben das tooltip an der linken Seite des Elements, und der Pfeil auf der Tooltipp geht auf der linken als auch. Oder, wenn der tooltip ist auf der Seite des Elements, dann wird es ausgerichtet nach oben und der Pfeil auf der Oberseite.

Im Grunde sieht es so aus jetzt:

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

Ich würde es wie folgt Aussehen:

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

Oder auf der Seite wie dieser:

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

Danke.

[EDIT] ich habe firgured aus dem bewegen des Pfeils, das ist einfach nur css. Aber die Angleichung der tooltip selbst scheint Teil des javascript.

InformationsquelleAutor BlueCaret | 2013-05-17

  1. 7

    Ich denke Sie werden sich anpassen müssen, um die tooltip-arrow CSS und die position der gesamten tooltip. Diese erhalten Sie in der Nähe, aber vielleicht braucht es mehr tweaks...

    .tooltip-arrow CSS

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

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

    jQuery-Funktion zum anpassen der Platzierung der QuickInfo..

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

    Demo auf Bootply

    EDIT: Sie können auch position die .tooltip mit CSS. Alternative demo

    .tooltip.right {
    margin-top:8px;
}
    Ich hatte gehofft, nicht in extra javascript-load-events (sorry, wenn diejenigen, die arn nicht die rechten Begriffe!) da dies auf eine ASP.net Website und die postbacks wir tun patzt bei diesem laden Sachen, die uns zwingen, uns noch mehr code, um es an die Arbeit. Ich hatte gehofft, für etwas, das im ursprünglichen javascript-code, den ich Bearbeiten kann.. vielleicht?
    Ich bearbeitet meine Antwort. Vielleicht besser für Sie arbeiten.
    Ich denke, das ist es! Ich danke Ihnen sehr!

    InformationsquelleAutor Zim

  2. 0

    Erreichen das folgende layout:

              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);
});

    Gibt es eine kleine Verzögerung durch aus-und einblenden der tooltip, aber die Positionierung funktioniert unabhängig von der tooltip-Größe.

    InformationsquelleAutor Dušan Maďar

Schreibe einen Kommentar