feat: added tooltips

frontend/src/Config/Format.elm

@@ -1,16 +1,18 @@
 module Config.Format exposing (..)
 
 import Config.Colour exposing (..)
-import Element 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)
 
 
 topLevelContainer : Element msg -> Element msg
 topLevelContainer =
     el
-        [ width fill
+        [ E.width fill
         , height fill
         , B.color colourTheme.backgroundColour
         ]
@@ -50,7 +52,7 @@ transitionNonHighlightedLinkHover =
 transitionNonHighlightedLinkHoverWithMove : Element msg -> Element msg
 transitionNonHighlightedLinkHoverWithMove content =
     el
-        [ width fill
+        [ E.width fill
         , height (px 30)
         ]
         (el
@@ -152,7 +154,7 @@ paragraphBoldFormat =
 
 paragraphWidth : Attribute msg
 paragraphWidth =
-    width <| px 700
+    E.width <| px 700
 
 
 paragraphAlignLeft : List (Attr () msg)
@@ -172,3 +174,35 @@ paragraphColumnFormat =
     [ spacing 20
     , paragraphWidth
     ]
+
+
+myTooltip : String -> Element msg
+myTooltip str =
+    el
+        [ B.color colourTheme.backgroundColour
+        , F.color colourTheme.nonHighlightedText
+        , padding 15
+        , D.rounded 5
+        , D.width 2
+        , F.center
+        , E.width <| px 300
+        , D.color colourTheme.highlightText
+        , F.size 15
+        , D.shadow
+            { offset = ( 0, 3 ), blur = 6, size = 0, color = rgba 0 0 0 0.32 }
+        ]
+        (text str)
+
+tooltip : (Element msg -> Attribute msg) -> Element Never -> Attribute msg
+tooltip usher tooltip_ =
+    inFront <|
+        el
+            [ E.width fill
+            , height fill
+            , transparent True
+            , mouseOver [ transparent False ]
+            , (usher << map never) <|
+                el [ htmlAttribute (style "pointerEvents" "none") ]
+                    tooltip_
+            ]
+            none