myrho / elm-hovercard / Hovercard

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

Configuration


type alias Config =
{ 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.

Init

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

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

Update the hovercard model

View

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

subscriptions : Model -> Platform.Sub.Sub Msg

Subscribes to Browser.Dom.onResize in order to reposition the hovercard automatically.

Commands

getElement : Model -> Platform.Cmd.Cmd Msg

Trigger positioning of the hovercard to the target element programmatically.

Internals


type Model

Hovercards internal model


type Msg

Hovercards internal Msgs