How can I get the tooltip when dragging a table header?

Tried on Vaadin 7.1.0 to 7.1.8
Glassfish 4.0 / JBoss
Firefox 24 Firefox 25.0.1 / IE10

This feature is about to show a tooltip-kind overlay following the mouse when I drag and drop a table header.

I created a vaadin web application with maven. (refer to Vaadin offical instructions).

Then, I add the code below in MyVaadinUI class.

protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();

        Table sample = new Table();

        sample.setVisibleColumns(new Object[]{ExampleUtil.iso3166_PROPERTY_NAME, ExampleUtil.iso3166_PROPERTY_SHORT});


        sample.setColumnHeaders(new String[]{"Country", "Code"});

        sample.setColumnAlignment(ExampleUtil.iso3166_PROPERTY_SHORT, Align.CENTER);

        sample.setColumnExpandRatio(ExampleUtil.iso3166_PROPERTY_NAME, 1);
        sample.setColumnWidth(ExampleUtil.iso3166_PROPERTY_SHORT, 70);



The class MyVaadinUI uses “mytheme” as default. And this “mytheme” actually is a blank theme, it just includes “reindeer” theme.

I traced something changed in HTML source code by FIrebug, when I drag the table header. There’s a

added at the bottom of body element, and its class is “v-table-header-drag”, style=“width: auto; left:-280px; top:26px;”. But when I release the mouse button, this
suddenly disappeared.

I suppose this may be caused by a wrong position caculation, because the “left:-280px” should be out of window edge.

I’m sorry for asking this question again, cause I still have this question and cannot work it out.

I’m very confused with this, and one of expert Teppo said it works fine on his local side. How come? I just asked my colleagues to verify this on their own workstation, the result is as same as mine.


I can now confirm this is indeed broken. The reason it worked for me was that I used legacy-styles.css. It seems to be broken when using an scss-compiled theme. The underlying reason is that the with the class name v-table-header-drag is added directly under the body element, and the prefixed css rules no longer apply (e.g. “.reindeer .v-table-header-drag”).

I’ll file ticket for this bug at the vaadin trac, and in the meantime you can use the following fix. Add this rule to your main scss file, directly under the reindeer import directive (3rd line):

.v-table-header-drag {
    background: url("../reindeer/common/img/vertical-sprites.png") repeat-x scroll left -814px rgba(0, 0, 0, 0);
    color: #222222;
    font-size: 10px;
    font-weight: bold;
    height: 20px;
    text-shadow: 0 1px 0 #F3F5F8;
    text-transform: uppercase;
    height: 16px;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 4px;
    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
    line-height: normal;
    border: 1px solid #C2C3C4;
    margin-top: 20px;
    opacity: 0.9;
    position: absolute;
    z-index: 30000;

I hope it will work for you now, and sorry about not noticing this before.

And here’s the ticket:

Hi Teppo,

Thank you for your help. it’s very helpful to me.