mirror of
https://gitlab.com/upRootNutrition/website.git
synced 2025-06-15 20:15:12 -05:00
91 lines
3.1 KiB
Elm
Executable file
91 lines
3.1 KiB
Elm
Executable file
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
|