Define the popover body content.
Add small overlay content, like those found in iOS, to any element for housing secondary information.
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.popoverStateYou 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 !
Initial default view state.
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
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 popoverCreates 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 popoverDefine a popover title.
attributes - List of attributeschildren - List of child elementsDefine the popover body content.
Define a popover h1 title.
attributes - List of attributeschildren - List of child elementsDefine a popover h2 title.
attributes - List of attributeschildren - List of child elementsDefine a popover h3 title.
attributes - List of attributeschildren - List of child elementsDefine a popover h4 title.
attributes - List of attributeschildren - List of child elementsDefine a popover h5 title.
attributes - List of attributeschildren - List of child elementsDefine a popover h6 title.
attributes - List of attributeschildren - List of child elementsShow popover to the left of the triggering element.
Show popover to the right of the triggering element.
Show popover above the triggering element.
Show popover below the triggering element.
Creates a default view config for a popover
triggerElement- The element that will trigger the popover