myrho/elm-hovercard/1.0.1

NOTE: the latest version is 5.1.0

Hovercard

This module makes rendering hovercards like Wikipedia's easy.

type alias Config =
{ maxWidth : Int
, maxHeight : Int
, borderColor : Color
, backgroundColor : Color
, borderWidth : Float
}

Configure the hovercard.

  • maxWidth: maximum width of the hovercard
  • maxHeight: maximum height of the hovercard
  • borderColor, borderWidth, backgroundColor: minimal styling for the hovercard and the small arrow pointing to the element
Config
-> Element
-> List (Attribute msg)
-> List (Html msg)
-> Html msg

Render a hovercard above or below the given Browser.Dom.Element.

Call this function at the root of your HTML so the hovercard is positioned correctly.

Example:

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