NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-27 13:02:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

add extra hover area to tooltips

Browse Source
This commit is contained in:
charbelrami 2022-09-02 08:59:10 -03:00
parent 92b081f748
commit c6c2821543
1 changed files with 67 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/Nri/Ui/Tooltip/V3.elm
View File

@ -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