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

module Config.Helpers.Cards.Inner.ToolTip exposing
    ( tooltip
    , tooltipImage
    )

import Config.Style.Colour.Helpers exposing (colourTheme)
import Config.Style.Transitions exposing (transitionStyleSlow)
import Element as E
    exposing
        ( Attribute
        , alignLeft
        , alignRight
        , below
        , centerX
        , centerY
        , el
        , fill
        , height
        , htmlAttribute
        , image
        , inFront
        , mouseOver
        , moveLeft
        , none
        , padding
        , px
        , rgba
        , text
        , transparent
        , width
        )
import Element.Background as B exposing (color)
import Element.Border as D
    exposing
        ( color
        , rounded
        , shadow
        , width
        )
import Element.Font as F
    exposing
        ( center
        , regular
        , size
        )
import Html.Attributes as H exposing (style)


tooltip : String -> Bool -> Attribute msg
tooltip content isLeft =
    inFront <|
        el
            [ E.width fill
            , height fill
            , transparent True
            , mouseOver [ transparent False ]
            , htmlAttribute <| H.style "z-index" "4"
            , transitionStyleSlow
            , below <|
                el
                    [ htmlAttribute (H.style "pointerEvents" "none")
                    , case isLeft of
                        True ->
                            alignLeft

                        False ->
                            alignRight
                    ]
                <|
                    el
                        [ E.width fill
                        , 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
            [ E.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
                        [ E.width <| px 400
                        , htmlAttribute <| H.style "z-index" "4"
                        , B.color colourTheme.backgroundLightGrey
                        , 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
                            [ E.width fill
                            , height fill
                            , centerX
                            , centerY
                            ]
                            { src = content
                            , description = "Tooltip image"
                            }
                        )
            ]
            none