CODEWITHSUNDEEP
c++qt5qtstylesheetsqtooltip
M87
M87

Reputation: 25

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

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

Upvotes: 0

Views: 262

Answers (1)

Jens
Jens

Reputation: 6329

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 }

Upvotes: 1

Related Questions