Skip to main content

Hover card

A delayed content panel that stays reachable while the pointer moves from its target.

Loading preview…
Live C++Source and licences
#include <QApplication>
#include <QFile>
#include <QHBoxLayout>
#include <QLabel>
#include <QPainter>
#include <QStandardItemModel>
#include <QUrl>
#include <QVBoxLayout>
#include <array>
#ifdef SHADCN_GALLERY_MEDIA
#include <shadcn/media.hpp>
#endif
#include <shadcn/shadcn.hpp>

QWidget* example(QWidget* parent = nullptr) {
    using namespace shadcn;
    const QString name = "hover-card";
    auto* canvas = new QWidget(parent);
    canvas->setAutoFillBackground(true);
    auto* outer = new QHBoxLayout(canvas);
    outer->setContentsMargins(32, 32, 32, 32);
    auto* host = new QWidget(canvas);
    auto* layout = new QVBoxLayout(host);
    layout->setContentsMargins(0, 0, 0, 0);
    layout->setSpacing(16);
    outer->addStretch();
    outer->addWidget(host, 0, Qt::AlignCenter);
    outer->addStretch();
    auto* button = new Button(name == "hover-card" ? "@shadcn"
                              : name == "tooltip"  ? "Hover"
                                                   : "Open popover",
                              host);
    button->setVariant(Variant::Outline);
    layout->addWidget(button);
    if (name == "tooltip") {
        auto* tip = new Tooltip("Add to library", canvas);
        tip->attach(*button);
        canvas->setProperty("capturePopup", QVariant::fromValue<QObject*>(tip));
        canvas->setProperty("captureAnchor", QVariant::fromValue<QObject*>(button));
    } else {
        Popover* popup = name == "hover-card" ? static_cast<Popover*>(new HoverCard(canvas))
                                              : new Popover(canvas);
        canvas->setProperty("capturePopup", QVariant::fromValue<QObject*>(popup));
        canvas->setProperty("captureAnchor", QVariant::fromValue<QObject*>(button));
        auto* title = new Label(name == "hover-card" ? "shadcn/ui" : "Dimensions", popup);
        popup->content().addWidget(title);
        auto* description =
            new QLabel(name == "hover-card" ? "Components for building interfaces."
                                            : "Set the dimensions for the layer.",
                       popup);
        description->setWordWrap(true);
        popup->content().addWidget(description);
        if (name == "hover-card")
            static_cast<HoverCard*>(popup)->attach(*button);
        else
            QObject::connect(button, &Button::clicked, popup,
                             [popup, button] { popup->showFor(*button); });
    }
    return canvas;
}

Installation​

add_subdirectory(shadcn-cpp)
target_link_libraries(app PRIVATE shadcn::widgets)

Usage​

#include <shadcn/overlays.hpp>

shadcn::HoverCard card(&window);
card.content().addWidget(new QLabel("Components for building interfaces.", &card));
card.setOpenDelay(200);
card.setCloseDelay(120);
card.attach(target);

The card stays open while the pointer can reach its content.

API​

setOpenDelay and setCloseDelay control the two timers. attach connects the card to its target widget.

Keyboard and accessibility​

Keep the essential action and information available outside the hover card. Hover content is supplemental.