This module makes rendering hovercards like Wikipedia's easy. It follows The Elm Architecture.
{ tickLength : Basics.Float
, zIndex : Basics.Int
, borderColor : Color
, backgroundColor : Color
, borderWidth : Basics.Float
, viewport : Maybe { x : Basics.Float
, y : Basics.Float
, width : Basics.Float
, height : Basics.Float }
}
Configure the hovercard.
position
.init : String -> ( Model, Platform.Cmd.Cmd Msg )
Initialize the hovercard with the ID of the target HTML element.
It tries to find the target element in the DOM using Browser.Dom.getElement.
update : Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg )
Update the hovercard model
view : Config -> Model -> List (Html.Attribute msg) -> List (Html msg) -> Html msg
Render the hovercard.
Example:
view
-- configuration
{ tickLength = 16
, zIndex = 1
, borderColor = Color.black
, backgroundColor = Color.lightBlue
, borderWidth = 2
, viewport = Nothing
}
-- Hovercard model
model
-- additional styles for the hovercard, eg. a shadow
[ style "box-shadow" "5px 5px 5px 0px rgba(0,0,0,0.25)"
]
-- the content of the hovercard
[ div
[]
[ text "Lorem ipsum dolor sit amet"
]
]
subscriptions : Model -> Platform.Sub.Sub Msg
Subscribes to Browser.Dom.onResize in order to reposition the hovercard automatically.
getElement : Model -> Platform.Cmd.Cmd Msg
Trigger positioning of the hovercard to the target element programmatically.
Hovercards internal model
Hovercards internal Msg
s