This component is being used to create a bubble box popup (within FluentUI it's called teaching bubble):
The component has the following properties:
- boxWidth: Number. Width of the box
- boxHeight: Number. Height of the box
- alignVertical: Boolean. Specifies whether the triangle should be aligned vertical (show left or right) or horizontal (show on top or bottom)
- vAlign: Text. Specifies the vertical position of the triangle. Valid values are "left-top", "left-center", "left-bottom", "right-top", "right-center", "right-bottom".
- hAlign: Text, Specifies the horizontal position of the triangle. Valid values are "top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right".
- title: Text. Title of the box
- description: Text. Text within the text box.
- fontSizeTitle: Number. Size of the title.
- fontSizeDescription: Number. Size of the text.
- backgroundColor: Text. Fill color of the box. Enter color in hex format like #000000
- color: Text. Text color. Enter color in hex format like #000000
- onButtonClose: Behaviour property for the "x" button.
