From c6c2821543fca581b30813ab7df7b654398f7ebd Mon Sep 17 00:00:00 2001
From: charbelrami <charbel.f.rami@gmail.com>
Date: Fri, 2 Sep 2022 08:59:10 -0300
Subject: [PATCH] add extra hover area to tooltips

---
 src/Nri/Ui/Tooltip/V3.elm | 68 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

diff --git a/src/Nri/Ui/Tooltip/V3.elm b/src/Nri/Ui/Tooltip/V3.elm
index c7c7379f..4951aed9 100644
--- a/src/Nri/Ui/Tooltip/V3.elm
+++ b/src/Nri/Ui/Tooltip/V3.elm
@@ -878,7 +878,21 @@ viewTooltip tooltipId config =
                 ++ config.attributes
                 ++ [ Attributes.id tooltipId ]
             )
-            config.content
+            (config.content
+                ++ [ Html.div
+                        [ Attributes.css
+                            [ Css.position Css.absolute
+                            , Css.Media.withMedia [ MediaQuery.notMobile ]
+                                [ Css.batch (hoverAreaForDirection config.direction)
+                                ]
+                            , Css.Media.withMedia [ MediaQuery.mobile ]
+                                [ Css.batch (hoverAreaForDirection config.mobileDirection)
+                                ]
+                            ]
+                        ]
+                        []
+                   ]
+            )
         ]
 
 
@@ -1029,6 +1043,58 @@ tailForDirection direction =
             rightTail
 
 
+hoverAreaForDirection : Direction -> List Style
+hoverAreaForDirection direction =
+    case direction of
+        OnTop ->
+            bottomHoverArea
+
+        OnBottom ->
+            topHoverArea
+
+        OnLeft ->
+            rightHoverArea
+
+        OnRight ->
+            leftHoverArea
+
+
+topHoverArea : List Style
+topHoverArea =
+    [ Css.bottom (Css.pct 100)
+    , Css.left Css.zero
+    , Css.right Css.zero
+    , Css.height (Css.px (tailSize * 2))
+    ]
+
+
+bottomHoverArea : List Style
+bottomHoverArea =
+    [ Css.top (Css.pct 100)
+    , Css.left Css.zero
+    , Css.right Css.zero
+    , Css.height (Css.px (tailSize * 2))
+    ]
+
+
+leftHoverArea : List Style
+leftHoverArea =
+    [ Css.right (Css.pct 100)
+    , Css.top Css.zero
+    , Css.bottom Css.zero
+    , Css.width (Css.px (tailSize * 2))
+    ]
+
+
+rightHoverArea : List Style
+rightHoverArea =
+    [ Css.left (Css.pct 100)
+    , Css.top Css.zero
+    , Css.bottom Css.zero
+    , Css.width (Css.px (tailSize * 2))
+    ]
+
+
 bottomTail : Style
 bottomTail =
     Css.batch