---
tags: button
title: Info popover
description: "Information popover buttons for displaying contextual help, tooltips, and additional details without navigation."
---

.d-flex.justify-content-between
  .popover-menu.info
    .popover-title Popover title
    .popover-content Popover content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    .text-with-icon.mt-xs
      .icon.icon-lock.text-disabled
      .text-sm 0/100 Pushups completed
    .text-with-icon.mt-xs
      .icon.icon-unlock.text-success
      .text-sm 50/50 Squats completed
    .popover-actions
      .btn.btn-sm.btn-inverted Action
.p-xs
%details.popover-wrapper
  %summary
    .btn.btn-sm.btn-square
      .icon.icon-info
  .popover-menu.info
    .popover-title Popover title with a long sentence containing some Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    .popover-content Popover content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    .text-with-icon.mt-xs
      .icon.icon-lock.text-disabled
      .text-sm 0/100 Pushups completed
    .text-with-icon.mt-xs
      .icon.icon-unlock.text-success
      .text-sm 50/50 Squats completed
    .popover-actions
      .btn.btn-sm.btn-inverted Action