elm-hovercard

This module makes rendering hovercards like Wikipedia's easy. Given a Browser.Dom.Element it is positioned above or below the element automatically.

hovercard
    -- configuration
    { maxWidth = 100
    , maxHeight = 100
    , tickLength = 16
    , borderColor = Color.black
    , backgroundColor = Color.lightBlue
    , borderWidth = 2
    }
    -- Browser.Dom.Element representing
    -- viewport and position of the element
    -- eg. the red square in the image below
    element
    -- 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"
        ]
    ]

Complete example

Live on Ellie!