website/frontend/src/Config/Helpers/ToolTip.elm

module Config.Helpers.ToolTip exposing (..)

import Config.Style.Colour.Helpers exposing (colourTheme)
import Config.Style.Transitions exposing (transitionStyleSlow)
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D
import Element.Font as F
import Html.Attributes as H


tooltip : String -> Attribute msg
tooltip content =
    inFront <|
        el
            [ width fill
            , height fill
            , transparent True
            , mouseOver [ transparent False ]
            , htmlAttribute <| H.style "z-index" "4"
            , transitionStyleSlow
            , below <|
                el [ htmlAttribute (H.style "pointerEvents" "none") ] <|
                    el
                        [ width <| px 300
                        , htmlAttribute <| H.style "z-index" "4"
                        , F.size 15
                        , F.center
                        , F.regular
                        , B.color colourTheme.backgroundLightGrey
                        , F.color colourTheme.textLightGrey
                        , padding 15
                        , D.color colourTheme.textLightOrange
                        , D.rounded 5
                        , D.width 2
                        , D.shadow
                            { offset = ( 0, 3 )
                            , blur = 6
                            , size = 0
                            , color = rgba 0 0 0 0.32
                            }
                        ]
                        (text content)
            ]
            none


tooltipImage : String -> Attribute msg
tooltipImage content =
    inFront <|
        el
            [ width fill
            , height fill
            , transparent True
            , mouseOver [ transparent False ]
            , htmlAttribute <| H.style "z-index" "4"
            , transitionStyleSlow
            , below <|
                el
                    [ htmlAttribute (H.style "pointerEvents" "none")
                    , moveLeft 200
                    ]
                <|
                    el
                        [ width <| px 400
                        , htmlAttribute <| H.style "z-index" "4"
                        , B.color colourTheme.backgroundLightGrey

                        -- , padding 15
                        , D.color colourTheme.textLightOrange
                        , D.rounded 5
                        , D.width 2
                        , D.shadow
                            { offset = ( 0, 3 )
                            , blur = 6
                            , size = 0
                            , color = rgba 0 0 0 0.32
                            }
                        ]
                        (image
                            [ width fill
                            , height fill
                            , centerX
                            , centerY
                            ]
                            { src = content
                            , description = "Tooltip image"
                            }
                        )
            ]
            none