Remove margin when setting an image in a QToolTip

Question

I am trying to use an image as a tooltip on a QLabel. I am following the method described here : Use a picture or image in a QToolTip

But I get an automatic margin around that image, which I would like to remove. By making the border apparent in stylesheet, and setting the tooltip background color, we can check that the additional margin is not part of the image, but is inside the border. Yet explicitely setting padding at "0px" doesn't remove it either.

Here is a minimal example:

#include "qapplication.h"
#include <QLabel>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QLabel hello("Hello world!", 0) ;
    hello.resize(200, 100);

    hello.setStyleSheet("QToolTip { padding: 0px; border: 2px solid green; background: red;}");

    QString html = QString("<img src='test.png'>");
    hello.setToolTip(html);

    hello.show();
    return a.exec();
}

And here is what I get from it :

The image is correct. The border follows the stylesheet, but I don't know where that red area comes from. How to get rid of this "margin"? Is this a QTooltip bug ?

It somewhat looks like the bug described here, but I am using Qt5.12.5, where it should be resolved : https://bugreports.qt.io/browse/QTBUG-59119

Edit: I'm on windows. The image is 482x482px large. I had someone try it on Linux, and that unwanted margin was also there, but much smaller.

Maxim Paperno Maxim Paperno · Accepted Answer · 2019-11-05T11:59:37

QToolTip styling is funky. It's actually a QLabel but then tries to inherit CSS from its parent widget... but also sets some hard-coded style attributes like margin and indent. And that bug isn't fixed, at least not all the way.

About the best I could do with your image is setting the qproperty-margin and qproperty-indent to zero (this sets the properties on the QLabel which is used to show the tooltip):

QToolTip { 
  qproperty-margin: 0; 
  qproperty-indent: 0; 
  border: 2px solid green; 
  background: red; 
}

This still leaves small red margins on the sides. I think part of the problem is image scaling... I tried with a different image and it seemed to cover the whole area. Also, if you set the CSS on the QApplication (instead of the QLabel instance as in your example) then the padding changes a bit yet again.

Another trick is to set the pixmap property on the tool tip label (instead of using HTML img tag):

QToolTip { 
  qproperty-pixmap: url(test.png);
  qproperty-margin: 0; 
  qproperty-indent: 0; 
  border: 2px solid green; 
  background: red; 
}

But here we can see that bug (or a similar one) -- on initial show there is red padding around the image, but as soon as the mouse is moved it re-scales properly with no more padding.

The best result I got is using the CSS background-image property, but you need to know the image size for that to work.

QToolTip { 
  background-image: url(test.png); 
  min-width: 461px; 
  min-height: 469px; 
  border: 2px solid green;
}

Remove margin when setting an image in a QToolTip

1 Answers