Custom tooltip - Modify the shape( Arrow-Shaped in the bottom or on top)

[hbatalha]

On many web-pages nowadays, you'll frequently see instant tooltips with an arrow that points to their target, similar to:

How can I achieve something similar to the image above?

I want to to use it to display the media position in a QSlider, like VLC Player does.

[mpergand]

Hi,
You can create your own custom Tootip class, for example :

class ToolTip : public QWidget
{
    public:

              ToolTip() : QWidget(nullptr)
                    {
                    setWindowFlags(Qt::ToolTip);
                    setAttribute(Qt::WA_TranslucentBackground);
                    //setAttribute(Qt::WA_OpaquePaintEvent);
                    //setAttribute(Qt::WA_NoSystemBackground);
                    }

            void  showAt(const QPoint& pt, const QString& txt=QString());
            void  setText(const QString& txt) { aText=txt; }

    protected:

            void  paintEvent(QPaintEvent *event);

    private:

         QString  aText;
};

and draw anything you want in the painEvent method.
For the roundedRect with an arrow, you can use QPainterPath.

[hbatalha]

@mpergand thanks, that is very helpful. I am not very familiar with paintEvent though, I will look more into it and how to create it. Thanks again.

Question: How do I link it to another widget? How do I set the setToolTip method to use this one?

[mpergand]

You must intercept the QEvent::ToolTip

bool MyWidget::event(QEvent *event)
{
    if( event->type() == QEvent::ToolTip )
        {
        showCustomTooltip();
        return true;
        }

    return QObject::event(event);
}

void showCustomTooltip()
{
   // set tooltip parameters here (size, position, etc)
   // for the position, you will need to use QWidget::mapToGlobal(pt) 
   myToolTip.show();
   // you can use the same tooltip instance for all the widgets by creating a class instance variable (static)
}

Here the code i use for my custom tootip; to get you an idea:

void ToolTip::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    QColor bgrColor=palette().color(QPalette::Inactive, QPalette::ToolTipBase);
    QColor txtColor=palette().color(QPalette::Inactive, QPalette::ToolTipText);

    painter.fillRect(rect(),QColor(210,210,210));
    painter.fillRect(rect(),bgrColor);
    painter.setFont(font());
    painter.setPen(txtColor);
    painter.drawText(rect().translated(0,1), Qt::AlignCenter, aText);
}

NB: of course you can subclass QToolTip ( i don't remenber why i've used QWidget instead ... )

[hbatalha]

@mpergand thanks for the code

[hbatalha]

@mpergand I actually found the exact code they use on VLC Media Player and it is Qt code.

Downloaded the VLC source code

Found the media position slider in input_slider.h/cpp in the directory: vlc-3.0.16\modules\gui\qt\util\input_slider.h/cpp

and the tooltip class in the same directory with the name timetooltip.h/cpp