feat(UsaTooltip): allow users to hover over tooltip content

This aligns with the USWDS 3.8.1 change: uswds/uswds#5835
patrickcate · Jul 5, 2024 · 94e7c0c · 94e7c0c
1 parent 2437a41
commit 94e7c0c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/src/components/UsaTooltip/UsaTooltip.test.js b/src/components/UsaTooltip/UsaTooltip.test.js
@@ -2,17 +2,13 @@ import '@module/@uswds/uswds/dist/css/uswds.min.css'
 import UsaTooltip from './UsaTooltip.vue'
 
 describe('UsaTooltip', () => {
-  it('renders the component', () => {
-    cy.mount(UsaTooltip, {
-      props: {
-        id: 'test-tooltip-id',
-        label: 'Test tooltip label',
-        customClasses: {},
-      },
-      slots: {
-        default: () => 'Test tooltip trigger',
-      },
-    })
+  it.only('renders the component', () => {
+    const wrapperComponent = {
+      components: { UsaTooltip },
+      template: `<div style="padding:150px;"><UsaTooltip id="test-tooltip-id" label="Test tooltip label">Test tooltip trigger</UsaTooltip></div>`,
+    }
+
+    cy.mount(wrapperComponent)
 
     cy.get('span.usa-tooltip').as('tooltip').should('exist')
 
@@ -29,7 +25,7 @@ describe('UsaTooltip', () => {
       .and('not.have.class', 'is-visible')
       .and('have.attr', 'role', 'tooltip')
       .and('have.attr', 'aria-hidden', 'true')
-      .and('have.class', 'usa-tooltip__body--bottom')
+      .and('have.class', 'usa-tooltip__body--top')
       .and('contain', 'Test tooltip label')
       .and('be.hidden')
 
@@ -39,7 +35,7 @@ describe('UsaTooltip', () => {
       .should('be.visible')
       .and('have.class', 'is-set')
       .and('have.class', 'is-visible')
-      .and('have.class', 'usa-tooltip__body--bottom')
+      .and('have.class', 'usa-tooltip__body--top')
       .and('have.attr', 'aria-hidden', 'false')
       .and('have.attr', 'style')
 
@@ -75,29 +71,29 @@ describe('UsaTooltip', () => {
       .and('have.class', 'is-visible')
       .and('have.attr', 'aria-hidden', 'false')
 
-    cy.get('@tooltip').type('{esc}')
+    cy.realPress('{esc}')
 
     cy.get('@tooltipLabel')
       .should('be.hidden')
       .and('not.have.class', 'is-set')
       .and('not.have.class', 'is-visible')
       .and('have.attr', 'aria-hidden', 'true')
 
-    cy.get('@tooltipTrigger').focus()
+    cy.get('@tooltipTrigger').realHover()
 
     cy.get('@tooltipLabel')
       .should('be.visible')
       .and('have.class', 'is-set')
       .and('have.class', 'is-visible')
       .and('have.attr', 'aria-hidden', 'false')
 
-    cy.get('@tooltip').type('{enter}')
+    cy.get('@tooltipLabel').realHover()
 
     cy.get('@tooltipLabel')
-      .should('be.hidden')
-      .and('not.have.class', 'is-set')
-      .and('not.have.class', 'is-visible')
-      .and('have.attr', 'aria-hidden', 'true')
+      .should('be.visible')
+      .and('have.class', 'is-set')
+      .and('have.class', 'is-visible')
+      .and('have.attr', 'aria-hidden', 'false')
   })
 
   it('renders with custom tags, CSS classes, and label slot content', () => {

diff --git a/src/components/UsaTooltip/UsaTooltip.vue b/src/components/UsaTooltip/UsaTooltip.vue
@@ -13,6 +13,7 @@ import {
   flip,
   inline,
 } from '@floating-ui/dom'
+import { onKeyStroke } from '@vueuse/core'
 import { nextId } from '@/utils/unique-id.js'
 
 const props = defineProps({
@@ -58,6 +59,7 @@ const props = defineProps({
   },
 })
 
+const wrapperElement = ref(null)
 const referenceElement = ref(null)
 const floatingElement = ref(null)
 const isSet = ref(false)
@@ -78,6 +80,10 @@ const labelClasses = computed(() => [
   ...(props.customClasses?.label || []),
 ])
 
+onKeyStroke('Escape', () => {
+  isSet.value = false
+})
+
 let cleanupFloatingUi
 
 const updatePosition = () => {
@@ -139,8 +145,12 @@ onBeforeUnmount(() => {
 <template>
   <component
     :is="wrapperTag"
+    ref="wrapperElement"
     class="usa-tooltip"
     :class="customClasses?.component"
+    @mouseenter="isSet = true"
+    @mouseover="isSet = true"
+    @mouseout="isSet = false"
   >
     <component
       :is="tag"
@@ -149,12 +159,8 @@ onBeforeUnmount(() => {
       class="usa-tooltip__trigger"
       tabindex="0"
       :aria-describedby="computedId"
-      @mouseenter="isSet = true"
-      @mouseover="isSet = true"
-      @mouseout="isSet = false"
       @focus="isSet = true"
       @blur="isSet = false"
-      @keydown="isSet = false"
       ><slot></slot
     ></component>
     <span