website/frontend/src/Config/ToolTip.elm

module Config.ToolTip exposing (..)

import Config.Colour exposing (..)
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D exposing (..)
import Element.Font as F
import Html exposing (col)
import Html.Attributes as H exposing (style)


tooltip : String -> Attribute msg
tooltip content =
    inFront <|
        el
            [ E.width fill
            , height fill
            , transparent True
            , mouseOver [ transparent False ]
            , htmlAttribute <| H.style "z-index" "4"
            , htmlAttribute <| style "transition" "all 0.3s ease-in-out"
            , below <|
                el [ htmlAttribute (H.style "pointerEvents" "none") ] <|
                    el
                        [ E.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