当前位置：首页 > news >正文

QToolTip+QSS

news 2026/3/26 19:59:19

QToolTip本质上只是一个调用者，被调用的其实是一个被设置了Qt::ToolTip标志的QLabel，而且它比QLabel多了一个QSS属性：
opacity气泡整体的透明度

富文本显示

因为QLabel本身是支持富文本的，所以气泡也支持富文本也不足为奇。我们来看几个示例

啤酒是一个正常的文本：

啤酒

饮料显示了一个图片:

<html><head/><body> <p><img src=":/images/26.png"/></p> </body></html>

矿泉水显示了很大的字

<html><head/><body> <p><span style=" font-size:72pt; font-weight:600;">矿泉水</span></p> </body></html>

小推车售卖员显示比较长的一段字 \n可以用来手动换行

啤酒饮料矿泉水，花生瓜子八宝粥。来，腿收一下哈!\n啤酒饮料矿泉水，红茶绿茶八宝粥，前面的让一让哈!

简单样式

QToolTip { background-color: #ccc; color: #ffffff; border: 1px solid #555555; border-radius: 5px; padding: 5px 10px; font-size: 13px; opacity: 120; }

可以看到，虽然加了opacity属性，但是实际没啥效果呀~ （再次强调，本豆用的是Qt5.12.10版本，因为原来在其它的Qt版本上用了，是有效果的，不确定是不是版本问题），既然如此我们只好另辟蹊径了。

class ToolTipFilter : public QObject { Q_OBJECT protected: bool eventFilter(QObject* obj, QEvent* event) override { if (event->type() == QEvent::ToolTip) { QHelpEvent *helpEvent = static_cast<QHelpEvent *>(event); QWidget* w = qobject_cast<QWidget*>(obj); if(w && !w->toolTip().isEmpty()) { QToolTip::showText(helpEvent->globalPos(), w->toolTip()); for(auto widget : qApp->topLevelWidgets()) { if(widget->objectName() == "qtooltip_label") { widget->setWindowOpacity(0.2); break; } } } else { QToolTip::hideText(); event->ignore(); } return true; } else { return QObject::eventFilter(obj, event); } } }; //再在main函数中加上这段 int main(int argc, char *argv[]) { QApplication a(argc, argv); a.installEventFilter(new ToolTipFilter); //<---关键代码 ... }

拦截全局的气泡消息，找到ObjectName为qtooltip_label的顶级Widget，为什么是qtooltip_label呢？因为本豆芽又去翻了源码。

然后强行给它加上0.2的透明度setWindowOpacity(0.2)，这时候再看看我们的气泡就能老老实实的透明了。

完全自定义气泡

简单实现一个没有背景的气泡：

class CustomToolTip : public QLabel { public: explicit CustomToolTip(QWidget* parent = nullptr) : QLabel(parent, Qt::ToolTip | Qt::FramelessWindowHint) { setAttribute(Qt::WA_TranslucentBackground); setStyleSheet("color:red;"); } static CustomToolTip* instance; static void showToolTip(const QString& text, const QPoint& pos, QWidget *p) { delete instance; instance = new CustomToolTip(p); instance->setText(text); instance->move(pos + QPoint(0, 5)); instance->show(); } static void hideToolTip() { instance->hide(); } };

修改刚才拦截的代码，收到气泡事件时让它弹出我们自定义的气泡

class ToolTipFilter : public QObject { Q_OBJECT protected: bool eventFilter(QObject* obj, QEvent* event) override { if (event->type() == QEvent::ToolTip) { QHelpEvent *helpEvent = static_cast<QHelpEvent *>(event); QWidget* w = qobject_cast<QWidget*>(obj); if(w && !w->toolTip().isEmpty()) { // QToolTip::showText(helpEvent->globalPos(), w->toolTip()); // for(auto widget : qApp->topLevelWidgets()) // { // if(widget->objectName() == "qtooltip_label") // { // widget->setWindowOpacity(0.2); // break; // } // } CustomToolTip::showToolTip(w->toolTip(), helpEvent->globalPos(), w); } else { // QToolTip::hideText(); CustomToolTip::hideToolTip(); event->ignore(); } return true; } else { return QObject::eventFilter(obj, event); } } };

效果是有了，但是我们的这个气泡比官方的气泡效率要低，只是出于演示目的所以没有做优化，有需要的小伙伴可以参考官方的代码自行实现下，或者直接用AI生成一个。

查看全文

http://www.jsqmd.com/news/252670/