Qt5制作鼠标悬停显示Hint的ToolTip

逃离我推掉我的手 2022-08-18 03:20 464阅读 0赞

在日常生活中的使用的软件中，我们经常会遇到这样的情况。  
我们在网页上，有些网页链接的文字（比如文章标题，知乎问题标题，百度的词条等）因为太长了，而显示不出来，但是鼠标悬停在上面的时候就可以显示出来。  
我们在QQ上或者某些输入框内，我们不知道应该输入什么内容，但是鼠标如果悬停在输入框内的时候，会产生一个友好信息的hint。  
实现方法，就是我们今天的ToolTip设置。

代码如下：  
ItemWidget.h

#ifndef ITEMWIDGET_H
    #define ITEMWIDGET_H
    
    #include <QWidget>
    #include <QLabel>
    #include <QPushButton>
    #include <QVBoxLayout>
    #include <QHBoxLayout>
    
    //class CLabel;
    
    class ItemWidget : public QWidget
    {
        Q_OBJECT
    public:
        explicit ItemWidget(QWidget *parent = 0);
        void setText(QPixmap pixmap, QString name, QString info);
        void setText(QString info);
    signals:
    
    public slots:
    private:
        QLabel *labelIcon;
        QLabel *labelName;
        QLabel *labelInfo;
    
        QHBoxLayout *horLayout;
        QVBoxLayout *verlayout;
    protected:
        bool event(QEvent *e);
    };
    
    #endif // ITEMWIDGET_H

ItemWidget.cpp

#include "itemwidget.h"
    #include "global.h"
    #include "ctooltip.h"
    
    #include <QEvent>
    #include <QCursor>
    
    ItemWidget::ItemWidget(QWidget *parent) :
        QWidget(parent)
    {
        labelIcon = new QLabel(this);
        labelName = new QLabel(this);
        labelName->setStyleSheet("QLabel{color: green; font: 13pt bold;}");
        labelInfo = new QLabel(this);
        labelInfo->setStyleSheet("QLabel{color: gray;}");
    
        verlayout = new QVBoxLayout();
        verlayout->setContentsMargins(0, 0, 0, 0);
        verlayout->addWidget(labelName);
        verlayout->addWidget(labelInfo);
    
        horLayout = new QHBoxLayout(this);
        horLayout->setContentsMargins(2, 2, 2, 2);
        horLayout->addWidget(labelIcon, 1, Qt::AlignTop);
        horLayout->addLayout(verlayout, 4);
    }
    
    void ItemWidget::setText(QPixmap pixmap, QString name, QString info) {
        labelIcon->setPixmap(pixmap);
        labelName->setText(name);
        labelInfo->setText(info);
    }
    
    // 测试用的
    void ItemWidget::setText(QString info) {
        labelIcon->setText(info);
    }
    
    // 鼠标悬停的时候，显示当前用户简要信息
    bool ItemWidget::event(QEvent *e) {
        if (e->type() == QEvent::ToolTip) {
            qDebug() << "tool tip show";
            g_toolTip->showMessage(labelIcon->pixmap(),
                                   labelName->text(),
                                   labelInfo->text(),
                                   QCursor::pos());
        } else if (e->type() == QEvent::Leave) {
            qDebug() << "tool tip leave";
            g_toolTip->hide();
        }
        return QWidget::event(e);
    }

然后是CToolTip自定义样式部分：  
CToolTip.h

#ifndef CTOOLTIP_H
    #define CTOOLTIP_H
    
    #include <QWidget>
    #include <QLabel>
    #include <QPushButton>
    #include <QGroupBox>
    #include <QVBoxLayout>
    #include <QHBoxLayout>
    
    class CToolTip : public QWidget { 
        Q_OBJECT
    public:
        explicit CToolTip(QWidget *parent = 0);
        void showMessage(const QPixmap *pixmap, QString name, QString info, QPoint point);
        void showMessage(const QPixmap *pixmap, QPoint point);
    signals:
    
    public slots:
    
    private:
        QLabel *labelIcon;
        QLabel *labelName;
        QLabel *labelInfo;
    
        QHBoxLayout *horLayout;
        QVBoxLayout *verlayout;
    
        QGroupBox *groupBox;
    
    protected:
        void hoverEvent(QHoverEvent *);
    };
    
    #endif // CTOOLTIP_H

CToolTip.cpp

#include "ctooltip.h"
    #include <QDebug>
    #include <QApplication>
    #include <QDesktopWidget>
    
    CToolTip::CToolTip(QWidget *parent) :
        QWidget(parent)
    {
        this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint);
        this->resize(200, 100); ;
    
        this->setObjectName("CToolTip");
        this->setStyleSheet("QWidget#CToolTip {border: 2px solid green; background-color: skyblue;}");
    
        groupBox = new QGroupBox(this);
        groupBox->setGeometry(10, 10, 180, 80);
        groupBox->setTitle("用户信息");
    
        labelIcon = new QLabel(groupBox);
        labelName = new QLabel(groupBox);
        labelInfo = new QLabel(groupBox);
    
        verlayout = new QVBoxLayout();
        verlayout->setContentsMargins(0, 0, 0, 0);
        verlayout->addWidget(labelName);
        verlayout->addWidget(labelInfo);
    
        horLayout = new QHBoxLayout(groupBox);
        horLayout->setContentsMargins(10, 10, 10, 10);
        horLayout->addWidget(labelIcon, 1, Qt::AlignTop);
        horLayout->addLayout(verlayout, 4);
    }
    
    // 显示ToolTip消息
    void CToolTip::showMessage(const QPixmap *pixmap, QString name, QString info, QPoint point) {
        labelIcon->setPixmap(*pixmap);
        labelName->setText(name);
        labelInfo->setText(info);
    
        // 重新定义CToolTip的坐标
        int rectX;
        int rectY;
        if (point.rx() < 200) {
            rectX = point.rx() + 10;
        } else {
            rectX = point.rx() - 240;
        }
        rectY =  point.ry();
        move(QPoint(rectX, rectY));
        QWidget::show();
    }
    
    // 显示ToolTip消息
    void CToolTip::showMessage(const QPixmap *pixmap, QPoint point) {
        labelIcon->setPixmap(*pixmap);
    
        labelName->setText("自己想办法获取");
        labelInfo->setText("自己动手，丰衣足食");
        // 此处可以作为QToolTip样式进行显示
        move(point);
        QWidget::show();
    }
    
    // 当鼠标进入事件时，让界面隐藏掉
    void CToolTip::hoverEvent(QHoverEvent *) {
        hide();
    }

当然当然，在大多数的组件上面都有一个成员函数`setToolTip(QSTring& ..)`  
这个就可以实现简单的友好信息提示功能了。