QTooltip unwanted behaviour. Icon from button is partly visible as background in the tooltip

Question

So, I think this picture speaks for itself. The tooltip should have black text color and lightgrey background. Ok, if you look closely, the background is lightgrey. But text is white and the most important, the icon for enabled button is shown. This should not be! Other default-buttons, without an icon, the tooltip is displayed correctly. I tried to solve this with opacity(different values) and rgba(211, 211, 211, 0/255), but nothing works. Is this a well-known problem? My System is Windows 10 64 bit and I use Qt Creator 4.12.2 (Community) with Qt 5.12.9 MinGW 64 bit compiler.

#include "mainwindow.h"

#include <QApplication>

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

    MainWindow w;
    w.setStyleSheet("QToolTip { background-color: lightgrey; "
                    "color: black; "
                    "border: none } "
                    "QWidget { color: lightblue; "
                    "background-color: #404040 }");
    w.show();
    return a.exec();
}

The stylesheet for that button looks like this:

ui -> CmdSave -> setStyleSheet(" :disabled { color: white; "
                                   "border-image: url(:/miscRsc/misc_icons/filesave_128x128_disabled) 3 10 3 10; "
                                   "border-top: 3px transparent; "
                                   "border-bottom: 3px transparent; "
                                   "border-right: 10px transparent; "
                                   "border-left: 10px transparent } "
                                   ":enabled { color: white; "
                                   "border-image: url(:/miscRsc/misc_icons/filesave_128x128) 3 10 3 10; "
                                   "border-top: 3px transparent; "
                                   "border-bottom: 3px transparent; "
                                   "border-right: 10px transparent; "
                                   "border-left: 10px transparent } "
                                   " :pressed { color: white; "
                                   "border-image: url(:/miscRsc/misc_icons/filesave_128x128_pressed.png) 2 9 2 9; border-top: 2px transparent; "
                                   "border-bottom: 2px transparent; "
                                   "border-right: 9px transparent; "
                                   "border-left: 9px transparent }");

You need to show more on how to reproduce, the code works as expected for me. — Jens, Nov 09 '20 at 16:16

Jens · Accepted Answer · 2020-11-13T22:46:12.440

Now we are coming closer to the problem and the solution. By setting the button style after setting the application's style, the tooltip inherits the button's style - especially, it inherits the buttons border image, which is why you see the buttons's border image reflected in the tooltip. You can avoid this by setting the button's style with a descendant selector (I simplified your style a bit):

QPushButton:disabled { border-image: url(:/folder.png) 3 10 3 10; border: 3px transparent } 
QPushButton:enabled  { border-image: url(:/folder.png) 3 10 3 10; border: 3px transparent } 
QPushButton:pressed  { border-image: url(:/folder.png) 3 10 3 10; border: 2px transparent }

Thank you very much. This solves the problem. I think, sometimes I should take a closer look at the inheritances to better understand how it works. — M87, Nov 11 '20 at 11:43

QTooltip unwanted behaviour. Icon from button is partly visible as background in the tooltip

1 Answers1