The configuration of the Hovercard

Default configuration for the hovercard.

• tickLength: 16
• zIndex: 9999
• borderColor: Color.gray
• backgroundColor: Color.white
• borderWidth: 1
• viewport: Nothing
• fixed: False
• tickOnlyStyle: False

Set the background color of the hovercard.

Set the background color of the hovercard as a CSS string.

Set the border color of the hovercard.

Set the border color of the hovercard as a CSS string.

Set the border width of the hovercard.

Set whether the hovercard uses fixed positioning.

Create a configuration with a custom tick length.

Set whether only the triangle gets background and border applied.

Set the viewport for the hovercard positioning.

Set the z-index of the hovercard.

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 the hovercard model

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"
        ]
    ]

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

Trigger positioning of the hovercard to the target element programmatically.

Hovercards internal model

Hovercards internal Msgs