Bootstrap.Popover

Add small overlay content, like those found in iOS, to any element for housing secondary information.

-- You need to keep track of the view state for a popover
type alias Model =
    { popoverState : Popover.State }


-- Define a message to handle popover state changes
type Msg
    = PopoverMsg Popover.State


-- Initialize the popover state
initialState : ( Model, Cmd Msg )
initialState =
    ( { popoverState = Popover.initialState }, Cmd.none )


-- Step the popover state forward in your update function
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        PopoverMsg state ->
            ( { model | popoverState = state }, Cmd.none )


-- Compose a popover in your view (or a view helper function)
view : Model -> Html Msg
view model =
    Popover.config
        (Button.button
            -- Here configure the popover to be shown when the mouse is above the button ( tooltip basically !)
            [ Button.attrs <| Popover.onHover model.popoverState PopoverMsg ]
            [ text "Toggle tooltip" ]
        )
        |> Popover.right
        |> Popover.titleH4 [] [ text "My title" ]
        |> Popover.content []
            [ text "Some content for my popover."
            , p [] [ text "Different elements ok..." ]
            ]
        |> Popover.view model.popoverState

You should be aware that the triggering element is wrapped by an inline-block div with relative positioning and that the popover is added as a sibling of the triggering element. This will limit it's usage and there are bound to be cases where they don't work as you'd expect. So make sure you test your views when using them !

Setup

config : Html msg -> Config msg

Creates a default view config for a popover

triggerElement - The element that will trigger the popover

initialState : State

Initial default view state.

view : State -> Config msg -> Html msg

This function creates the view representation for a Popover. Whether it's displayed or not is determined by it's view state.

state - The current view state for the popover
config - The view configuration for the popover

type Config msg

Opaque representation of the view configuration for a Popover

type State

Opaque representation of the view state for a Popover

Triggering

onClick : State -> (State -> msg) -> List (Attribute msg)

Creates a click handler that will toggle the visibility of a popover

state - The current state of the popover to toggle
toMsg - Message tagger function to handle state changes to a popover

onHover : State -> (State -> msg) -> List (Attribute msg)

Creates a mouseenter and mouseleave message handler that will toggle the visibility of a popover

state - The current state of the popover to toggle
toMsg - Message tagger function to handle state changes to a popover

View composition

title : List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg

Define a popover title.

attributes - List of attributes
children - List of child elements

content : List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg

Define the popover body content.

titleH1 : List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg

Define a popover h1 title.

attributes - List of attributes
children - List of child elements

titleH2 : List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg

Define a popover h2 title.

attributes - List of attributes
children - List of child elements

titleH3 : List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg

Define a popover h3 title.

attributes - List of attributes
children - List of child elements

titleH4 : List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg

Define a popover h4 title.

attributes - List of attributes
children - List of child elements

titleH5 : List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg

Define a popover h5 title.

attributes - List of attributes
children - List of child elements

titleH6 : List (Attribute msg) -> List (Html msg) -> Config msg -> Config msg

Define a popover h6 title.

attributes - List of attributes
children - List of child elements

Positioning

left : Config msg -> Config msg

Show popover to the left of the triggering element.

right : Config msg -> Config msg

Show popover to the right of the triggering element.

top : Config msg -> Config msg

Show popover above the triggering element.

bottom : Config msg -> Config msg

Show popover below the triggering element.

nixCodeX/elm-bootstrap/3.1.0

Bootstrap.Popover

Setup

Triggering

View composition

Positioning

Modules