Qt5 Tutorial Tool Tips in HTML style - 2020

In this tutorial, we will learn Tool Tips in HTML style utilizing image resources.

In this tutorial, we're using a simple QDialog with two push buttons:

When we place our mouse on the first button, it processes (renders) HTML document (tags at least) and displays it.

We need to use images from resources.

If not comfortable using Resources, please go back to previous tutorial Resource Files (.qrc).

Right click on the Project->Add New...->Qt->Qt Resource file

Next->Finish.

Add->Add Prefix.

Set it as "/files".

Add->Add Files.

After adding two images:

Run the code, and put the mouse on the second button:

tooltipsdialog.cpp:

#include "tooltipsdialog.h"
#include "ui_tooltipsdialog.h"

ToolTipsDialog::ToolTipsDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::ToolTipsDialog)
{
    ui->setupUi(this);

    ui->pushButton->setToolTip(
                "<h2><b><font color='red'>MyList</font></b></h2>"
                "<ol>"
                  "<li>First</li>"
                  "<li>Second</li>"
                  "<li>Third</li>"
                "</ol>"
                );
    ui->pushButton_2->setToolTip("<img src=':files/images/Book_Icon.png'/> Book");
}

ToolTipsDialog::~ToolTipsDialog()
{
    delete ui;
}

tooltipsdialog.h:

#ifndef TOOLTIPSDIALOG_H
#define TOOLTIPSDIALOG_H

#include <QDialog>

namespace Ui {
class ToolTipsDialog;
}

class ToolTipsDialog : public QDialog
{
    Q_OBJECT
    
public:
    explicit ToolTipsDialog(QWidget *parent = 0);
    ~ToolTipsDialog();
    
private slots:

private:
    Ui::ToolTipsDialog *ui;
};

#endif // TOOLTIPSDIALOG_H