Skip to content

Latest commit

 

History

History
63 lines (30 loc) · 2.39 KB

design-patterns-controls-InfoBalloon.md

File metadata and controls

63 lines (30 loc) · 2.39 KB

InfoBalloon

Basics

The InfoBalloon control displays additional information when the user hovers or clicks on the control. The hover behavior is typically called a tooltip and will appear on hover and disappear when the mouse is not over the control. The click behavior is typically called a "call out" and will continue to display until the user clicks away.

When to use

Use the InfoBalloon control to display additional info to the user. Many user input controls have an infoBalloonContent option which enables the InfoBalloon behavior without an additional control.

Best practices

Do

  • Set the infoBalloonContent on input controls so that the built-in InfoBalloon behavior is available. The built-in InfoBalloon click behavior enables the infoBalloonContent to display while the user interacts with the field.
  • Format InfoBalloon content and infoBalloonContent using HTML to decorate text, use bullets, use links, etc There is guidance in the Azure Design Templates figma file on common InfoBalloon formatting.
  • Provide concise, meaningful content in the InfoBalloon.
  • Provide links in the InfoBalloon content if the user will want to learn more by going to an external site.

Don't

  • Don't just repeat the control label text in the InfoBalloon. That is not helpful.

Developer tips and tricks

Interactive control and sample source code

Go to the playground site to use the latest control and get source code for your project. Learn more about playground.

Related info