gwtpaginationtwitter-bootstrap-tooltipgwtbootstrap3

gwtbootstrap3 tooltip at wrong place for pagination


enter image description here

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 :)


Solution

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