NoRedInk/noredink-ui/21.12.0

NOTE: the latest version is 35.9.3

Nri.Ui.Balloon.V1

You propably want to use Nri.Tooltip not this. This is used to display a ballon-like container.

Changelog

Patch changes

  • use Shadows
balloon : List Attribute -> Html msg -> Html msg

Green balloon without an arrow by default.

 __________
|         |
|_________|

Customizations for Balloon

Use these if you don't want the standard green balloon

Balloon's attributes.

Green theme (This is the default theme.)

Purple theme

Orange theme

White theme

Balloon with the arrow on the top.

 ___/\_____
|         |
|_________|

Balloon with the arrow on the right.

  __________
 |         |
 |          >
 |_________|

Balloon with the arrow on the left.

  __________
 |         |
<          |
 |_________|

Balloon with the arrow on the bottom.

 __________
|         |
|___  ____|
    \/
widthPx : Float -> Attribute

Width of the balloon in pixels.

widthPct : Float -> Attribute

Warning: using a percentage-based width may change the positioning of the element in unexpected ways.

paddingPx : Float -> Attribute

Padding of the balloon in pixels.

balloon [ green, onTop ] (text "hello")

Modules