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.
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
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.
{ name : String
, options : Maybe Json.Encode.Value
, data : Maybe Json.Encode.Value
}
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.