bluedogtraining / bdt-elm / ToolTip

This module is useful if you want to add a ToolTip to your app.

Initialise and update


type Model

Add a ToolTip.Model to your model.

type alias MyModel =
    { myToolTip : ToolTip.Model
    }

init : String -> Model

} } Init a ToolTip.Model in your model.

myInitialModel : MyModel
myInitialModel =
    { myToolTip = ToolTip.init
    }


type Msg

Add a ToolTip.Msg to your Msg.

type MyMsg
    = UpdateMyToolTip ToolTip.Msg

update : Msg -> Model -> Model

Use in your update function.

myUpdate : Msg -> Model -> ( Model, Cmd Msg )
myUpdate msg model =
    case msg of
        UpdateMyToolTip toolTipMsg ->
            let
                ( newToolTip, cmd ) =
                    ToolTip.update toolTipMsg mode.myToolTip
            in
            { model | myToolTip = newToolTip } ! [ cmd ]

View and render

view : Model -> View

Transform an ToolTip.Model into an ToolTip.View, which allows us to pipe View Setters on it.

myView : Model -> Html Msg
myView model =
    div
        []
        [ ToolTip.view model.myToolTip -- pipe view setters here, for example |> top
        ]

render : View -> Html.Styled.Html Msg

Transforms an ToolTip.View into Html ToolTip.Msg

myView : Model -> Html Msg
myView model =
    div
        []
        [ ToolTip.render model.myToolTip
            |> Html.map UpdateMyToolTip
        ]

View Setters

text : String -> View -> View

Set text for the tooltip content

icon : FeatherIcons.Icon -> View -> View

Set icon for the tooltip content

top : View -> View

Render the tip above the content

left : View -> View

Render the tip left of the content

bottom : View -> View

Render the tip below the content

green : View -> View

Make the ToolTip green

red : View -> View

Make the ToolTip red

blue : View -> View

Make the ToolTip blue