onHover -> onToggle

src/Nri/Ui/Tooltip/V2.elm

@@ -7,7 +7,7 @@ module Nri.Ui.Tooltip.V2 exposing
     , alignStart, alignMiddle, alignEnd
     , exactWidth, fitToContent
     , smallPadding, normalPadding, customPadding
-    , onClick, onHover
+    , onClick, onToggle
     , open
     , css, containerCss
     , custom, customTriggerAttributes
@@ -18,7 +18,7 @@ module Nri.Ui.Tooltip.V2 exposing
 {-| Known issues:
 
   - tooltips with focusable content (e.g., a link) will not handle focus correctly for
-    keyboard-only users when using the onHover attribute
+    keyboard-only users when using the onToggle attribute
 
 Post-release patches:
 
@@ -72,7 +72,7 @@ Example usage:
 @docs alignStart, alignMiddle, alignEnd
 @docs exactWidth, fitToContent
 @docs smallPadding, normalPadding, customPadding
-@docs onClick, onHover
+@docs onClick, onToggle
 @docs open
 @docs css, containerCss
 @docs custom, customTriggerAttributes
@@ -419,8 +419,8 @@ type Trigger msg
 
 {-| The tooltip opens when hovering over the trigger element, and closes when the hover stops.
 -}
-onHover : (Bool -> msg) -> Attribute msg
-onHover msg =
+onToggle : (Bool -> msg) -> Attribute msg
+onToggle msg =
     Attribute (\config -> { config | trigger = Just (OnHover msg) })
 
 

src/Nri/Ui/Tooltip/V3.elm

@@ -9,7 +9,7 @@ module Nri.Ui.Tooltip.V3 exposing
     , alignStartForMobile, alignMiddleForMobile, alignEndForMobile
     , exactWidth, fitToContent
     , smallPadding, normalPadding, customPadding
-    , onHover
+    , onToggle
     , open
     , css, notMobileCss, mobileCss, quizEngineMobileCss, containerCss
     , custom
@@ -29,6 +29,7 @@ module Nri.Ui.Tooltip.V3 exposing
   - fix spelling of "auxillary" to "auxiliary"
   - toggleTip -> viewToggleTip
   - Adds notMobileCss, mobileCss, quizEngineMobileCss
+  - onHover -> onToggle
 
 These tooltips aim to follow the accessibility recommendations from:
 
@@ -45,7 +46,7 @@ These tooltips aim to follow the accessibility recommendations from:
 @docs alignStartForMobile, alignMiddleForMobile, alignEndForMobile
 @docs exactWidth, fitToContent
 @docs smallPadding, normalPadding, customPadding
-@docs onHover
+@docs onToggle
 @docs open
 @docs css, notMobileCss, mobileCss, quizEngineMobileCss, containerCss
 @docs custom
@@ -527,10 +528,17 @@ type Trigger msg
     = OnHover (Bool -> msg)
 
 
-{-| The tooltip opens when hovering over the trigger element, and closes when the hover stops.
+{-| The Tooltip event cycle depends on whether you're following the Disclosure pattern, but disguising the Disclosure as a tooltip visually or you're actually adding a hint or label for sighted users.
+
+If you're adding a tooltip to an element that _does_ something on its own, e.g., a "Print" ClickableSvg, then it doesn't make sense for the tooltip to change state on click/enter/space.
+
+However, if you're adding a tooltip to an element that is not interactive at all if you don't count the tooltip, then we can use the click/enter/space events to manage the tooltip state too. This style of "tooltip" is the only kind that will be accessible for touch users on mobile -- it's important to get the access pattern right!
+
+If the tooltip behavior you're seeing doesn't _feel_ quite right, consider whether you need to change tooltip "types" to `disclosure` or to `auxiliaryDescription`.
+
 -}
-onHover : (Bool -> msg) -> Attribute msg
-onHover msg =
+onToggle : (Bool -> msg) -> Attribute msg
+onToggle msg =
     Attribute (\config -> { config | trigger = Just (OnHover msg) })
 
 

styleguide-app/Examples/ClickableSvg.elm

@@ -102,7 +102,7 @@ Tooltip.view
     }
     [ Tooltip.plaintext "Preview"
     , Tooltip.primaryLabel
-    , Tooltip.onHover SetPreviewTooltip
+    , Tooltip.onToggle SetPreviewTooltip
     , Tooltip.open state.tooltipPreview
     , Tooltip.smallPadding
     , Tooltip.fitToContent
@@ -121,7 +121,7 @@ Tooltip.view
                     }
                     [ Tooltip.plaintext "Preview"
                     , Tooltip.primaryLabel
-                    , Tooltip.onHover SetPreviewTooltip
+                    , Tooltip.onToggle SetPreviewTooltip
                     , Tooltip.open state.tooltipPreview
                     , Tooltip.smallPadding
                     , Tooltip.fitToContent

styleguide-app/Examples/SegmentedControl.elm

@@ -206,7 +206,7 @@ buildOptions { content, longContent, tooltips } openTooltip =
               , ", tabTooltip = "
                     ++ (if tooltips then
                             ("\n\t\t[ Tooltip.plaintext " ++ valueStr)
-                                ++ ("\n\t\t, Tooltip.onHover (OpenTooltip " ++ valueStr ++ ")")
+                                ++ ("\n\t\t, Tooltip.onToggle (OpenTooltip " ++ valueStr ++ ")")
                                 ++ ("\n\t\t, Tooltip.open (openTooltip == Just " ++ valueStr ++ ")")
                                 ++ "\n\t\t]"
 
@@ -225,7 +225,7 @@ buildOptions { content, longContent, tooltips } openTooltip =
               , tabTooltip =
                     if tooltips then
                         [ Tooltip.plaintext (Debug.toString value)
-                        , Tooltip.onHover (PageTooltip value)
+                        , Tooltip.onToggle (PageTooltip value)
                         , Tooltip.open (openTooltip == Just value)
                         ]
 
@@ -279,7 +279,7 @@ buildRadioOptions options currentlyHovered content =
               , ", tooltip = "
                     ++ (if options.tooltips then
                             ("\n\t\t[ Tooltip.plaintext " ++ String.fromInt value)
-                                ++ ("\n\t\t, Tooltip.onHover (OpenTooltip " ++ String.fromInt value ++ ")")
+                                ++ ("\n\t\t, Tooltip.onToggle (OpenTooltip " ++ String.fromInt value ++ ")")
                                 ++ ("\n\t\t, Tooltip.open (openTooltip == Just " ++ String.fromInt value ++ ")")
                                 ++ "\n\t\t]"
 
@@ -299,7 +299,7 @@ buildRadioOptions options currentlyHovered content =
                         [ Tooltip.plaintext text
                         , Tooltip.open (currentlyHovered == Just value)
                         , Tooltip.fitToContent
-                        , Tooltip.onHover
+                        , Tooltip.onToggle
                             (\hovered ->
                                 HoverRadio
                                     (if hovered then

styleguide-app/Examples/Tabs.elm

@@ -221,7 +221,7 @@ allTabs openTooltipId labelledBy =
          , Tabs.tabString "1"
          , Tabs.withTooltip
             [ Tooltip.plaintext "Link Example"
-            , Tooltip.onHover (ToggleTooltip First)
+            , Tooltip.onToggle (ToggleTooltip First)
             , Tooltip.alignStart (Css.px 75)
             , Tooltip.primaryLabel
             , Tooltip.open (openTooltipId == Just First)
@@ -245,7 +245,7 @@ allTabs openTooltipId labelledBy =
         [ Tabs.tabHtml bulbIcon
         , Tabs.withTooltip
             [ Tooltip.plaintext "The Electrifying Third Tab"
-            , Tooltip.onHover (ToggleTooltip Third)
+            , Tooltip.onToggle (ToggleTooltip Third)
             , Tooltip.primaryLabel
             , Tooltip.open (openTooltipId == Just Third)
             ]

styleguide-app/Examples/Tooltip.elm

@@ -215,7 +215,7 @@ viewPrimaryLabelTooltip openTooltip =
         }
         [ Tooltip.plaintext "Download"
         , Tooltip.primaryLabel
-        , Tooltip.onHover (ToggleTooltip PrimaryLabel)
+        , Tooltip.onToggle (ToggleTooltip PrimaryLabel)
         , Tooltip.open (openTooltip == Just PrimaryLabel)
         , Tooltip.smallPadding
         , Tooltip.fitToContent
@@ -236,7 +236,7 @@ viewAuxillaryDescriptionToolip openTooltip =
         }
         [ Tooltip.plaintext "Manage class and students"
         , Tooltip.auxiliaryDescription
-        , Tooltip.onHover (ToggleTooltip AuxillaryDescription)
+        , Tooltip.onToggle (ToggleTooltip AuxillaryDescription)
         , Tooltip.open (openTooltip == Just AuxillaryDescription)
         , Tooltip.smallPadding
         , Tooltip.fitToContent
@@ -272,7 +272,7 @@ viewDisclosureToolip openTooltip =
                 [ Html.text "Learn more about NoRedInk Mastery" ]
             ]
         , Tooltip.disclosure { triggerId = triggerId, lastId = Just lastId }
-        , Tooltip.onHover (ToggleTooltip Disclosure)
+        , Tooltip.onToggle (ToggleTooltip Disclosure)
         , Tooltip.open (openTooltip == Just Disclosure)
         , Tooltip.smallPadding
         , Tooltip.alignEndForMobile (Css.px 148)
@@ -283,7 +283,7 @@ viewToggleTip : Maybe TooltipId -> Html Msg
 viewToggleTip openTooltip =
     Tooltip.viewToggleTip { label = "What is mastery?", lastId = Nothing }
         [ Tooltip.plaintext "Students master topics by correctly answering a series of questions of varying difficulty and scope."
-        , Tooltip.onHover (ToggleTooltip LearnMore)
+        , Tooltip.onToggle (ToggleTooltip LearnMore)
         , Tooltip.open (openTooltip == Just LearnMore)
         , Tooltip.alignEndForMobile (Css.px 144)
         ]

tests/Spec/Nri/Ui/Tooltip.elm

@@ -25,7 +25,7 @@ spec =
                 in
                 program (Tooltip.viewToggleTip { label = label, lastId = Nothing })
                     [ Tooltip.plaintext tooltipContent
-                    , Tooltip.onHover identity
+                    , Tooltip.onToggle identity
                     ]
                     -- Tooltip opens on mouse enter
                     |> mouseEnter [ nriDescription "Nri-Ui-Tooltip-V2" ]
@@ -60,7 +60,7 @@ spec =
                     )
                     [ Tooltip.plaintext tooltipContent
                     , Tooltip.primaryLabel
-                    , Tooltip.onHover identity
+                    , Tooltip.onToggle identity
                     ]
                     -- Tooltip opens on mouse enter
                     |> mouseEnter [ nriDescription "Nri-Ui-Tooltip-V2" ]