Approach to Create Floating Box UI in QT

Question

The "supports" bubble acts similar to a tool tip, when button is clicked it appears next to a button.

How is this bubble created? it allows widgets to be placed inside itself. Is this a widget by itself or some sort of float layout? I am new to QT and couldn't figure out how to approach this, which widget to use to achieve this?

Answer 1

TL;DR: A simple QWidget, shown on demand, and programatically placed next to the button you target.

Other options:

• QMenu and related classes can be used to create your own menu, but this would be quite painful to customize, and possibly not flexible enough for your case
• QDialog is the perfect match when you want an modal or independent window that you can drag around, waiting for user's input. But your's is static and not modal
• QWidget is the base class for all widgets in Qt, and it is completely multipurpose, and can be used as a container for other widgets. QLayout then provide structure to you content (alignement, sizing, ...)

How to

• (Optional) Create your widget's content in Qt Designer
• Instantiate your dialog when you create your UI

• Connect to the button "clicked" signal

  connect(mybutton, &QPushButton::clicked, this, &MainWindow::showXButtonTooltip);
  

• Place your tooltip and show it

  void MainWindow::showXButtonTooltip()
  {
      // Get your button position relative to the common
      // parent with QWidget::pos() and mapToParent.
      // Or just use a fixed value...
      QPoint position;
      m_tooltipWidget.move(position.x, position.y);
      m_tooltipWidget.show();
  }
  

Be careful not to put your toolbox inside a layout, or you won't be able to "move" it, as this is the responsability of the Layout.