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 !
config : Html.Styled.Html msg -> Config msg
Creates a default view config for a popover
triggerElement
- The element that will trigger the popoverinitialState : State
Initial default view state.
view : State -> Config msg -> Html.Styled.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 popoverconfig
- The view configuration for the popoverOpaque representation of the view configuration for a Popover
Opaque representation of the view state for a Popover
onClick : State -> (State -> msg) -> List (Html.Styled.Attribute msg)
Creates a click handler that will toggle the visibility of a popover
state
- The current state of the popover to toggletoMsg
- Message tagger function to handle state changes to a popoveronHover : State -> (State -> msg) -> List (Html.Styled.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 toggletoMsg
- Message tagger function to handle state changes to a popovertitle : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Config msg -> Config msg
Define a popover title.
attributes
- List of attributeschildren
- List of child elementscontent : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Config msg -> Config msg
Define the popover body content.
titleH1 : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Config msg -> Config msg
Define a popover h1 title.
attributes
- List of attributeschildren
- List of child elementstitleH2 : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Config msg -> Config msg
Define a popover h2 title.
attributes
- List of attributeschildren
- List of child elementstitleH3 : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Config msg -> Config msg
Define a popover h3 title.
attributes
- List of attributeschildren
- List of child elementstitleH4 : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Config msg -> Config msg
Define a popover h4 title.
attributes
- List of attributeschildren
- List of child elementstitleH5 : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Config msg -> Config msg
Define a popover h5 title.
attributes
- List of attributeschildren
- List of child elementstitleH6 : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Config msg -> Config msg
Define a popover h6 title.
attributes
- List of attributeschildren
- List of child elementsleft : 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.