Hovercard

This module makes rendering hovercards like Wikipedia's easy. It follows The Elm Architecture.

Configuration

type alias Config =

{ tickLength : Float

, zIndex : Int

, borderColor : Color

, backgroundColor : Color

, borderWidth : Float

, viewport :

Maybe

{ x : Float

, y : Float

, width : Float

, height : Float

}

Configure the hovercard.

tickLength: length of the tick
zIndex: z-index css property of the hovercard
borderColor, borderWidth, backgroundColor: minimal styling for the hovercard and the small arrow pointing to the element
viewport: override the viewport in which the hovercard can be positioned. This is needed if you render the hovercard within an HTML element with CSS attribute position.

Init

init : String -> ( Model, 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

update : Msg -> Model -> ( Model, Cmd Msg )

Update the hovercard model

View

view : Config -> Model -> List (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"
        ]
    ]