x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<button x-data @click="$dispatch('relationships-modal')" type="button" class="group flex items-start gap-cfa-sm text-link-unvisited cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:rounded-sm" data-analytics-event="tooltip_clicked" data-analytics-id="preview/relationships"> <svg class="cfa-icon text-current" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#info_outline"></use></svg> <span class="underline group-hover:no-underline">What relationships qualify?</span></button><div x-id="['relationships-title', 'relationships-buttons']" x-transition.opacity class="fixed inset-0 z-1000" x-show="open" x-cloak x-data="{ open: false, toggle() { this.open = !this.open; if (this.open) { this.$nextTick(() => { this.$refs.modalTitle.focus({ preventScroll: true }); }); } else { this.$dispatch('relationships-modal-dismissed'); } }, init() { const resetScrollingBehavior = () => { document.documentElement.style.overflow = ''; document.documentElement.style.paddingRight = ''; }; document.addEventListener('turbo:before-visit', resetScrollingBehavior); } }" @relationships-modal.window="toggle()" > <div class="h-dvh w-screen relative flex flex-row justify-center items-center bg-stone-400/50 overflow-y-hidden" x-trap.inert.noscroll="open" @keyup.escape.window="open && toggle()" > <div role="dialog" aria-modal="true" :aria-labelledby="$id('relationships-title')" x-transition x-show="open" @click.away="toggle()" class="cfa-modal relative flex flex-col min-h-50 max-h-[90dvh] md:max-h-[80dvh] overflow-auto bg-white rounded-lg border-border-secondary border-2" > <div class="p-cfa-lg cfa-stack-med max-w-[360px]"> <div class="flex flex-row justify-between gap-x-cfa-xl"> <h1 x-ref="modalTitle" tabindex="-1" :id="$id('relationships-title')" class="focus:outline-none" > What relationships qualify? </h1> <button type="button" @click="toggle()" class="flex shrink-0 cursor-pointer bg-transparent border-0 p-0 text-inherit focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus" aria-label="Close modal" > <svg class="cfa-icon" width="25" height="25" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#close"></use></svg> </button> </div> <div class="cfa-stack-med"> <p>The following relationships qualify:</p> <ul> <li>Biological child</li> <li>Adopted child</li> <li>Stepchild</li> <li>Foster child</li> </ul> <p>If none of your dependents meet one of the relationships listed, this service isn't the best option for you.</p> </div> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
<%= render(TooltipComponent.new(label: "What relationships qualify?", modal_name: "relationships")) do %> <p>The following relationships qualify:</p> <ul> <li>Biological child</li> <li>Adopted child</li> <li>Stepchild</li> <li>Foster child</li> </ul> <p>If none of your dependents meet one of the relationships listed, this service isn't the best option for you.</p><% end %>No notes provided.
No params configured.