webentwicklung-frage-antwort-db.com.de

Bootstrap-Tooltip dynamisch positionieren (für dynamisch generierte Elemente)

Ich verwende die Tooltips von Twitter Bootstrap (http://Twitter.github.com/bootstrap/javascript.html#tooltips).

Ich habe ein dynamisch markiertes Markup in meinem DOM, das die Tooltips auslösen muss. Deshalb stoße ich Tooltips folgendermaßen aus (https://github.com/Twitter/bootstrap/issues/4215):

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    selector: '[rel=tooltip]:not([disabled])'
});

Um zu vermeiden, dass Tooltips zu nahe am Bildschirmrand platziert werden, muss ich ihre Position dynamisch basierend auf der Position des Elements festlegen können, das den Tooltip auslöst. Ich dachte daran, dies folgendermaßen zu tun:

   $('body').tooltip({
        delay: { show: 300, hide: 0 },
        // here comes the problem...
        placement: positionTooltip(this),
        selector: '[rel=tooltip]:not([disabled])'
    });



function positionTooltip(currentElement) {
     var position = $(currentElement).position();

     if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

     return "top";
}

Wie kann ich currentElement korrekt an die positionTooltip-Funktion übergeben, um für jeden Tooltip den entsprechenden Platzierungswert zurückzugeben?

Danke im Voraus

22
maze

Bootstrap ruft die Platzierungsfunktion mit Parametern auf, die das Element enthalten 

this.options.placement.call(this, $tip[0], this.$element[0])

in deinem Fall also:

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    placement: function(tip, element) { //$this is implicit
        var position = $(element).position();
        if (position.left > 515) {
            return "left";
        }
        if (position.left < 515) {
            return "right";
        }
        if (position.top < 110){
            return "bottom";
        }
        return "top";
    },
    selector: '[rel=tooltip]:not([disabled])'
});
34
davidkonrad

So platziere ich meinen Tooltip in Bootstrap 2.3.2

placement: function (tooltip, trigger) {
    window.setTimeout(function () {
        $(tooltip)
            .addClass('top')
            .css({top: -24, left: 138.5})
            .find('.tooltip-arrow').css({left: '64%'});

        $(tooltip).addClass('in');
    }, 0);
}

Im Wesentlichen sage ich hier, dass mein Tooltip mit einem benutzerdefinierten Versatz oben positioniert wird, auch der kleine Pfeil am unteren Dreieck befindet sich etwas nach rechts.

Am Ende füge ich die in-Klasse hinzu, die den Tooltip anzeigt.

Beachten Sie auch, dass der Code in der Funktion setTimeout 0 eingeschlossen ist.

5
simo

Die Option placement in docs ermöglicht die Funktion. Es ist nicht dokumentiert (was ich finden konnte), welche Argumente in der Funktion enthalten sind. Dies ist jedoch leicht zu ermitteln, indem Sie arguments in der Konsole protokollieren.

Hier können Sie verwenden:

$('body').tooltip({

   placement: function(tip, el){
     var position = $(el).position();
      /* code to return value*/

  }

/* other options*/
})
5
charlietfl

Dies ist eine Abkürzung, die ich zum Bestimmen der Fensterbreite verwende (768) oder nicht, und dann die Platzierung der Tooltips von links nach oben ändern:

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}
1
Mohsen

dieser hat für mich gearbeitet

$("[rel=tooltip]").popover({
            placement: function(a, element) {
               var position = $(element).parent().position();
               console.log($(element).parent().parent().is('th:first-child'));

                if ($(element).parent().parent().is('th:last-child')) {
                    return "left";
                }
                if ($(element).parent().parent().is('th:first-child')) {
                    return "right";
                }
                return "bottom";
            },

        });
0
Jonathan

$(element).position() funktioniert nicht richtig, wenn die Option container auf die QuickInfo gesetzt ist.

In meinem Fall verwende ich container : 'body' und muss stattdessen $(element).offset() verwenden.

0