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

255 Views Asked by At

The tooltip should have black text color and lightgrey background color

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 }");
1

There are 1 best solutions below

1
On BEST ANSWER

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 }