feat(tooltips): add option for inline tooltips

frontend/src/utils/tooltips/tooltips.scss

@@ -1,7 +1,7 @@
 .tooltip {
   position: relative;
   display: inline-block;
-  vertical-align: -0.375rem;
+  vertical-align: middle;
 
   &:hover .tooltip__content {
     display: inline-block;
@@ -55,8 +55,6 @@
 }
 
 .tooltip.tooltip__inline {
-  vertical-align: middle;
-
   .tooltip__handle {
     height: 1.0rem;
     line-height: 1.0rem;

src/Handler/Info.hs

@@ -54,7 +54,7 @@ getInfoLecturerR =
     tooltipPlanned = toWidget [whamlet| _{MsgLecturerInfoTooltipPlanned} |]
     tooltipNewU2W  = toWidget [whamlet| _{MsgLecturerInfoTooltipNewU2W} |]
     newFeat, plannedFeat, newU2WFeat :: WidgetFor UniWorX ()
-    newFeat        = toWidget [whamlet| ^{iconTooltip tooltipNew (Just IconNew)} |]
-    -- probFeat       = toWidget [whamlet| ^{iconTooltip tooltipProblem (Just IconProblem)} |]
-    plannedFeat    = toWidget [whamlet| ^{iconTooltip tooltipPlanned (Just IconPlanned)} |]
-    newU2WFeat     = toWidget [whamlet| ^{iconTooltip tooltipNewU2W (Just IconAnnounce)} |]
+    newFeat        = toWidget [whamlet| ^{iconTooltip tooltipNew (Just IconNew) False} |]
+    -- probFeat       = toWidget [whamlet| ^{iconTooltip tooltipProblem (Just IconProblem) False} |]
+    plannedFeat    = toWidget [whamlet| ^{iconTooltip tooltipPlanned (Just IconPlanned) False} |]
+    newU2WFeat     = toWidget [whamlet| ^{iconTooltip tooltipNewU2W (Just IconAnnounce) True} |]  -- to be used inside text blocks

src/Utils/Icon.hs

@@ -119,12 +119,13 @@ icon ic = [shamlet|
           |]
 
 -- Create an icon (defaults to "?") with a specified tooltip
-iconTooltip :: forall site. WidgetFor site () -> Maybe Icon -> WidgetFor site ()
-iconTooltip tooltip mIcon = let ic = iconText $ case mIcon of
-                                       Nothing -> IconTooltipDefault
-                                       Just i  -> i
-                                urgency = "urgency__info" :: Text
-                            in $(whamletFile "templates/widgets/tooltip.hamlet")
+iconTooltip :: forall site. WidgetFor site () -> Maybe Icon -> Bool -> WidgetFor site ()
+iconTooltip tooltip mIcon isInlineTooltip = let
+    ic = iconText $ case mIcon of
+      Nothing -> IconTooltipDefault
+      Just i  -> i
+    urgency = "urgency__info" :: Text
+  in $(whamletFile "templates/widgets/tooltip.hamlet")
 
 -- declare constats for all icons for compatibility and convenience
 -- "IconCourse" generates "iconCourse = icon IconCourse"

src/Utils/Message.hs

@@ -203,4 +203,5 @@ messageTooltip Message{..} = let urgency = statusToUrgencyClass messageStatus
                                                Utils.Message.Info    -> IconTooltipDefault
                                              Just i  -> i
                                  tooltip = toWidget messageContent :: WidgetFor site ()
+                                 isInlineTooltip = False
                              in $(whamletFile "templates/widgets/tooltip.hamlet")

templates/adminTest.hamlet

@@ -8,7 +8,7 @@
     Der Handler sollte jeweils aktuelle Beispiele für alle möglichen Funktionalitäten enthalten, so dass man immer weiß, wo man nachschlagen kann.
 
  <p>
-   ^{iconTooltip testTooltipMsg Nothing}
+   ^{iconTooltip testTooltipMsg Nothing False}
    ^{messageTooltip msgInfoTooltip}
    ^{messageTooltip msgSuccessTooltip}
    ^{messageTooltip msgWarningTooltip}

templates/widgets/multiFileField.hamlet

@@ -20,6 +20,6 @@ $# new files
     _{MsgMultiFileUploadInfo}
 
 <div .file-input__unpack>
-  ^{iconTooltip autoUnzipInfo Nothing}
+  ^{iconTooltip autoUnzipInfo Nothing False}
   <label for=#{fieldId}_zip>_{MsgAutoUnzip}
   <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>

templates/widgets/tooltip.hamlet

@@ -1,6 +1,6 @@
 $newline never
 
-<div .tooltip>
+<div .tooltip :isInlineTooltip:.tooltip__inline>
   <div .tooltip__handle .#{urgency}>
     <i .fas .fa-^{ic}>
   <div .tooltip__content>