如何在 pyqt 中自定義工具提示 ToolTip

之一Yo發表於2022-05-23
QT

前言

Qt 自帶的工具提示樣式不太好看，就算加了樣式表也時不時會失效，同時工具提示沒有陰影，看起來就更難受了。所以本篇部落格將會介紹自定義工具提示的方法，效果如下圖所示：

自定義工具提示

實現過程

工具提示其實就是一個帶了標籤的視窗，為了給工具提示加上陰影，只要給視窗設定 QGraphicsShadowEffect 即可。同時 QToolTip 彈出之後不會一直卡在介面上，一段時間後就會消失，所以我們應該給自定義的工具提示加上一個 QTimer，時間溢位之後就隱藏工具提示。

# coding:utf-8
from PyQt5.QtCore import QFile, QPropertyAnimation, QTimer, Qt
from PyQt5.QtGui import QColor
from PyQt5.QtWidgets import (QApplication, QFrame, QGraphicsDropShadowEffect,
                             QHBoxLayout, QLabel)


class ToolTip(QFrame):

    def __init__(self, text='', parent=None):
        super().__init__(parent=parent)
        self.__text = text
        self.__duration = 1000
        self.timer = QTimer(self)
        self.hBox = QHBoxLayout(self)
        self.label = QLabel(text, self)
        self.ani = QPropertyAnimation(self, b'windowOpacity', self)

        # set layout
        self.hBox.addWidget(self.label)
        self.hBox.setContentsMargins(10, 7, 10, 7)

        # add shadow
        self.shadowEffect = QGraphicsDropShadowEffect(self)
        self.shadowEffect.setBlurRadius(32)
        self.shadowEffect.setColor(QColor(0, 0, 0, 60))
        self.shadowEffect.setOffset(0, 5)
        self.setGraphicsEffect(self.shadowEffect)

        self.timer.setSingleShot(True)
        self.timer.timeout.connect(self.hide)

        # set style
        self.setAttribute(Qt.WA_StyledBackground)
        self.setDarkTheme(False)
        self.__setQss()

    def text(self):
        return self.__text

    def setText(self, text: str):
        """ set text on tooltip """
        self.__text = text
        self.label.setText(text)
        self.label.adjustSize()
        self.adjustSize()

    def duration(self):
        return self.__duration

    def setDuration(self, duration: int):
        """ set tooltip duration in milliseconds """
        self.__duration = abs(duration)

    def __setQss(self):
        """ set style sheet """
        f = QFile("resource/tooltip.qss")
        f.open(QFile.ReadOnly)
        self.setStyleSheet(str(f.readAll(), encoding='utf-8'))
        f.close()

        self.label.adjustSize()
        self.adjustSize()

    def setDarkTheme(self, dark=False):
        """ set dark theme """
        dark = 'true' if dark else 'false'
        self.setProperty('dark', dark)
        self.label.setProperty('dark', dark)
        self.setStyle(QApplication.style())

    def showEvent(self, e):
        self.timer.stop()
        self.timer.start(self.__duration)
        super().showEvent(e)

    def hideEvent(self, e):
        self.timer.stop()
        super().hideEvent(e)

工具提示繼承自 QFrame 的原因是我們需要設定邊框樣式，樣式表如下所示，支援亮暗兩種主題：

ToolTip[dark="false"] {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 5px;
    background-color: rgb(243, 243, 243);
}

ToolTip[dark="true"] {
    border: 1px solid rgb(28, 28, 28);
    border-radius: 5px;
    background-color: rgb(43, 43, 43);
}

QLabel {
    background-color: transparent;
    font: 15px 'Segoe UI', 'Microsoft YaHei';
}

QLabel[dark="false"] {
    color: black;
}

QLabel[dark="true"] {
    color: white;
}

測試

下述程式碼的執行效果就是動圖中所示的樣子，只要給想要設定工具提示的部件安裝上事件過濾器，就能將 QToolTip 替換成自定義的工具提示：

# coding:utf-8
import sys
from PyQt5.QtCore import QEvent, QPoint
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout

from tool_tip import ToolTip


class Demo(QWidget):

    def __init__(self):
        super().__init__()
        self.hBox = QHBoxLayout(self)
        self.button1 = QPushButton('キラキラ', self)
        self.button2 = QPushButton('食べた愛', self)
        self._toolTip = ToolTip(parent=self)
        # self._tooltip.setDarkTheme(True)

        self.button1.setToolTip('aiko - キラキラ ✨')
        self.button2.setToolTip('aiko - 食べた愛 ?')
        self.button1.setToolTipDuration(1000)
        self.button2.setToolTipDuration(5000)

        self.button1.installEventFilter(self)
        self.button2.installEventFilter(self)

        self.hBox.setContentsMargins(30, 30, 30, 30)
        self.hBox.setSpacing(20)
        self.hBox.addWidget(self.button1)
        self.hBox.addWidget(self.button2)

        self.resize(600, 300)
        self._toolTip.hide()

        with open('resource/demo.qss', encoding='utf-8') as f:
            self.setStyleSheet(f.read())

    def eventFilter(self, obj, e: QEvent):
        if obj is self:
            return super().eventFilter(obj, e)

        tip = self._toolTip
        if e.type() == QEvent.Enter:
            tip.setText(obj.toolTip())
            tip.setDuration(obj.toolTipDuration())

            pos = obj.mapTo(self, QPoint(0, 0))
            x = pos.x() + obj.width()//2 - tip.width()//2
            y = pos.y() - 5 - tip.height()

            # adjust postion to prevent tooltips from appearing outside the window
            x = min(max(5, x), self.width() - tip.width() - 5)
            y = min(max(5, y), self.height() - tip.height() - 5)

            tip.move(x, y)
            tip.show()
        elif e.type() == QEvent.Leave:
            tip.hide()
        elif e.type() == QEvent.ToolTip:
            return True

        return super().eventFilter(obj, e)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Demo()
    w.show()
    app.exec_()

用到的樣式檔案如下：

QWidget{
    background-color: white;
}

QPushButton {
    background-color: rgb(204, 204, 204);
    padding: 10px 64px 10px 64px;
    font: 19px 'Microsoft YaHei';
    border: transparent;
    border-radius: 4px;
}

QPushButton:pressed:hover {
    background-color: rgb(153, 153, 153);
}

QPushButton:hover {
    background-color: rgb(230, 230, 230);
}

QPushButton:disabled {
    background-color: rgb(204, 204, 204);
    color: rgb(122, 122, 122);
}

後記

自定義工具提示的方法已經介紹完了，更多好康的自定義小部件參見 GitHub 倉庫 https://github.com/zhiyiYo/PyQt-Fluent-Widgets，以上~~

相關文章