fix padding

src/Nri/Ui/Tooltip/V1.elm

@@ -243,40 +243,73 @@ toggleTip :
     -> Tooltip msg
     -> Html msg
 toggleTip { isOpen, onTrigger, extraButtonAttrs, label } tooltip_ =
+    let
+        contentSize =
+            20
+    in
     Nri.Ui.styled Html.div
         "Nri-Ui-Tooltip-V1-ToggleTip"
-        tooltipContainerStyles
+        (tooltipContainerStyles
+            ++ [ -- Take up enough room within the document flow
+                 Css.width (Css.px contentSize)
+               , Css.height (Css.px contentSize)
+               , Css.margin (Css.px 5)
+               ]
+        )
         []
         [ Html.button
             ([ Widget.label label
-             , css
-                (buttonStyleOverrides
-                    ++ [ Css.padding (Css.px 10) -- This is needed to provide a "hover bridge", so the tooltip won't close when trying to click a link
-                       ]
-                )
+             , css buttonStyleOverrides
              ]
                 ++ eventsForTrigger OnHover onTrigger
                 ++ extraButtonAttrs
             )
-            [ Html.div
-                [ css
-                    [ Css.position Css.relative
-                    , Css.width (Css.px 20)
-                    , Css.height (Css.px 20)
-                    , Css.color Colors.azure
+            [ hoverBridge contentSize
+                [ Html.div
+                    [ css
+                        [ Css.position Css.relative
+                        , Css.width (Css.px contentSize)
+                        , Css.height (Css.px contentSize)
+                        , Css.color Colors.azure
+                        ]
                     ]
-                ]
-                [ iconHelp
-                , Html.span
-                    [ -- This adds aria-live polite & also aria-live atomic, so our screen readers are alerted when content appears
-                      Role.status
+                    [ iconHelp
+                    , Html.span
+                        [ -- This adds aria-live polite & also aria-live atomic, so our screen readers are alerted when content appears
+                          Role.status
+                        ]
+                        [ viewIf (\_ -> viewTooltip Nothing OnHover tooltip_) isOpen ]
                     ]
-                    [ viewIf (\_ -> viewTooltip Nothing OnHover tooltip_) isOpen ]
                 ]
             ]
         ]
 
 
+{-| Provides a "bridge" for the cursor to move from trigger content to tooltip, so the user can click on links, etc.
+
+Works by being larger than the trigger content & overlaying it, but is removed from the flow of the page (position: absolute), so that it looks ok visually.
+
+-}
+hoverBridge : Float -> List (Html msg) -> Html msg
+hoverBridge contentSize =
+    let
+        padding =
+            -- enough to cover the empty gap between tooltip and trigger content
+            10
+    in
+    Nri.Ui.styled Html.div
+        "tooltip-hover-bridge"
+        [ Css.boxSizing Css.borderBox
+        , Css.padding (Css.px padding)
+        , Css.width (Css.px <| contentSize + padding * 2)
+        , Css.height (Css.px <| contentSize + padding * 2)
+        , Css.position Css.absolute
+        , Css.top (Css.px <| negate padding)
+        , Css.left (Css.px <| negate padding)
+        ]
+        []
+
+
 {-| Made with <https://levelteams.com/svg-to-elm>
 -}
 iconHelp : Svg msg

styleguide-app/Examples/Tooltip.elm

@@ -11,7 +11,7 @@ import Css
 import Html.Styled.Attributes exposing (css, href)
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.Heading.V2 as Heading
-import Nri.Ui.Text.V3 as Text
+import Nri.Ui.Text.V4 as Text
 import Nri.Ui.Tooltip.V1 as Tooltip
 
 
@@ -100,56 +100,40 @@ example msg model =
         , Html.br [ css [ Css.marginBottom (Css.px 20) ] ]
         , Heading.h3 [] [ Html.text "toggleTip" ]
         , Text.smallBody [ Html.text "A Toggle Tip is triggered by the \"?\" icon and provides supplemental information for the page." ]
-        , Tooltip.tooltip
-            [ Html.text "Tooltip On Top! "
-            , Html.a
-                [ href "/" ]
-                [ Html.text "Links work!" ]
+        , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
+            [ Tooltip.tooltip
+                [ Html.text "Tooltip On Top! "
+                , Html.a
+                    [ href "/" ]
+                    [ Html.text "Links work!" ]
+                ]
+                |> Tooltip.toggleTip
+                    { onTrigger = ToggleTooltip ToggleTipTop >> msg
+                    , isOpen = model.openTooltip == Just ToggleTipTop
+                    , label = "More info"
+                    , extraButtonAttrs = []
+                    }
+            , Text.mediumBody
+                [ Html.text "This toggletip will open on top"
+                ]
             ]
-            |> Tooltip.toggleTip
-                { onTrigger = ToggleTooltip ToggleTipTop >> msg
-                , isOpen = model.openTooltip == Just ToggleTipTop
-                , label = "More info"
-                , extraButtonAttrs = []
-                }
-        , Tooltip.tooltip
-            [ Html.text "Tooltip On Left! "
-            , Html.a
-                [ href "/" ]
-                [ Html.text "Links work!" ]
+        , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
+            [ Tooltip.tooltip
+                [ Html.text "Tooltip On Left! "
+                , Html.a
+                    [ href "/" ]
+                    [ Html.text "Links work!" ]
+                ]
+                |> Tooltip.withPosition Tooltip.OnLeft
+                |> Tooltip.toggleTip
+                    { onTrigger = ToggleTooltip ToggleTipLeft >> msg
+                    , isOpen = model.openTooltip == Just ToggleTipLeft
+                    , label = "More info"
+                    , extraButtonAttrs = []
+                    }
+            , Text.mediumBody
+                [ Html.text "This toggletip will open on the left"
+                ]
             ]
-            |> Tooltip.withPosition Tooltip.OnLeft
-            |> Tooltip.toggleTip
-                { onTrigger = ToggleTooltip ToggleTipLeft >> msg
-                , isOpen = model.openTooltip == Just ToggleTipLeft
-                , label = "More info"
-                , extraButtonAttrs = []
-                }
-        , Tooltip.tooltip
-            [ Html.text "Tooltip On Right! "
-            , Html.a
-                [ href "/" ]
-                [ Html.text "Links work!" ]
-            ]
-            |> Tooltip.withPosition Tooltip.OnRight
-            |> Tooltip.toggleTip
-                { onTrigger = ToggleTooltip ToggleTipRight >> msg
-                , isOpen = model.openTooltip == Just ToggleTipRight
-                , label = "More info"
-                , extraButtonAttrs = []
-                }
-        , Tooltip.tooltip
-            [ Html.text "Tooltip On Bottom! "
-            , Html.a
-                [ href "/" ]
-                [ Html.text "Links work!" ]
-            ]
-            |> Tooltip.withPosition Tooltip.OnBottom
-            |> Tooltip.toggleTip
-                { onTrigger = ToggleTooltip ToggleTipBottom >> msg
-                , isOpen = model.openTooltip == Just ToggleTipBottom
-                , label = "More info"
-                , extraButtonAttrs = []
-                }
         ]
     }