caribou-oss / elm-popper / Popper

This module contains everything you need to use Popper.js for tooltips in your Elm code. See the README.md for some additional setup needed.

Main Utilities

config : String -> Config

Create a configuration for your tooltip that may then be added to an html element via withTooltip. The only required argument is the id attribute of the tooltip that should be referenced.

withTooltip : Html msg -> Config -> Html msg

Add a tooltip to a piece of html

Configuration

withModifier : Modifier -> Config -> Config

Add a custom modifier, or any modifier that may not have a helper method associated with it here. Modifiers that you may add are documented here. Modifiers have a name, and usually an options and/or data field. A good example is the withOffset function

withOffset ( skidding, distance ) =
    withModifier
        { name = "offset"
        , data = Nothing
        , options =
            Just <|
                Encode.object
                    [ ( "offset", Encode.list Encode.float [ skidding, distance ] )
                    ]
        }

withOffset : ( Basics.Float, Basics.Float ) -> Config -> Config

Adds the offset modifier to the tooltip. The two floats represent skidding and distance

withPlacement : Placement -> Config -> Config

Configure the placement of the tooltip. Note that popperjs will detect when your placement causes it to flow off the screen and alter the placement accordingly.

withStrategy : Strategy -> Config -> Config

Configure the strategy of the tooltip. Either fixed or absolute.

Configuration Types


type alias Modifier =
{ name : String
, options : Maybe Json.Encode.Value
, data : Maybe Json.Encode.Value 
}

Configuration for custom modifiers to be added via withModifier


type Placement
    = Auto
    | AutoStart
    | AutoEnd
    | Top
    | TopStart
    | TopEnd
    | Bottom
    | BottomStart
    | BottomEnd
    | Right
    | RightStart
    | RightEnd
    | Left
    | LeftStart
    | LeftEnd

The placement configuration value.


type Strategy
    = Absolute
    | Fixed

The placement strategy to be used by the tooltip. The default is Absolute. An Absolute tooltip will more smoothly follow the element it is attached to, but is more beholden to your page layout. Fixed should more predictably follow the element but there may be some jumpiness as popper manually moves the tooltip.