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.

Add a tooltip to a piece of html

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 ] )
                    ]
        }

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

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.

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

Configuration for custom modifiers to be added via withModifier

The placement configuration value.

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.