gwtbootstrap3 tooltip at wrong place for pagination

Question

This is what happens when you hover the very left item of the pagination or the very right one.

What I need to have:

That the tooltip is stick to the corresponding element when I hover it.

My code:

back = new AnchorListItem();
back.setText("Vorherige Aufgabe");
back.setIcon(IconType.CHEVRON_LEFT);
back.setIconPosition(IconPosition.LEFT);
bback.addClickHandler(new ClickHandler() {  ...some code... }
if (some_Condition){
    Tooltip tooltip = new Tooltip(back, "Diese Aufgabe hat nur eine Teilaufgabe");
    tooltip.setPlacement(Placement.TOP);
}
pagination.add(back);

.
. 
.
some code
.
.
.
next = new AnchorListItem();
next.setText("Nächste Aufgabe");
next.setIcon(IconType.CHEVRON_RIGHT);
next.setIconPosition(IconPosition.RIGHT);
next.addClickHandler(new ClickHandler() { ...some code... }
if (some_Condition){
    Tooltip tooltip = new Tooltip(next, "Diese Aufgabe hat nur eine Teilaufgabe");
    tooltip.setPlacement(Placement.TOP);
}
pagination.add(next);

Setting the Placement differently changes only in which direction the tooltip it placed, but not the origin.

I would be thankful for any hints :)

Answer 1

Please, don't ask how I found it nor why it works, but the solution is:

Add float: left; style to AnchorListItem's <li> element inside Pagination.

You can do it in your stylesheet:

.pagination li {
    float: left;
}

Surprisingly, this is also an answer to this problem: bootstrap tooltip shifted right ;)