Skip to content

Commit 0e12874

Browse files
Aman-HundalAman-Hundal
authored
Merge pull request #450 from bcgov/test-AH-FOIMOD-3894
Ticket 3894: FOI REQUEST Form Updates (UX and UI updates to Tooltips)
2 parents 59462dd + cefd50c commit 0e12874

File tree

9 files changed

+231
-15
lines changed

9 files changed

+231
-15
lines changed

‎web/src/app/route-components/childprotection-child/childprotection-child.component.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,15 @@ <h3>Your records as a <strong>child</strong> from a child protection investigati
1818

1919
<div class="form-check form-check-inline" *ngFor="let subitem of item.suboptions; let si = subindex">
2020
<input class="form-check-input" type="checkbox" [value]="subitem.option" [checked]="subitem.selected" (change)="selectedsuboption(subitem)" />
21-
<label [title]="subitem.description" class="form-check-label" for="flexCheckDefault">
21+
<label class="form-check-label" for="flexCheckDefault">
2222
{{subitem.option}}
2323
</label>
24+
<div class="icon-tooltip-wrapper">
25+
<fa-icon class="info-icon" icon="info-circle"></fa-icon>
26+
<div class="custom-tooltip">
27+
{{subitem.description}}
28+
</div>
29+
</div>
2430
</div>
2531

2632
</div>

‎web/src/app/route-components/childprotection-child/childprotection-child.component.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,52 @@
2222
padding-left: 4px;
2323
}
2424
}
25+
}
26+
27+
.icon-tooltip-wrapper {
28+
position: relative;
29+
display: inline-block;
30+
margin-left: 5px;
31+
}
32+
33+
.info-icon {
34+
font-size: 0.8em;
35+
cursor: pointer;
36+
}
37+
38+
.custom-tooltip {
39+
visibility: hidden;
40+
opacity: 0;
41+
position: absolute;
42+
background-color: white;
43+
color: #494949;
44+
text-align: center;
45+
border-radius: 4px;
46+
border: solid 1px rgba(0, 0, 0, 0.2);
47+
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
48+
padding: 4px 8px;
49+
font-size: 0.8em;
50+
min-width: 350px;
51+
z-index: 10;
52+
53+
/* Positioning the tooltip */
54+
top: 50%; /* Align vertically with the icon */
55+
left: calc(100% + 5px); /* Slightly to the right of the icon */
56+
transform: translateY(-50%); /* Center vertically */
57+
}
58+
59+
.icon-tooltip-wrapper:hover .custom-tooltip {
60+
animation: show-tooltip 0.1s forwards;
61+
animation-delay: 1s;
62+
}
63+
64+
@keyframes show-tooltip {
65+
0% {
66+
visibility: hidden;
67+
opacity: 0;
68+
}
69+
100% {
70+
visibility: visible;
71+
opacity: 1;
72+
}
2573
}

‎web/src/app/route-components/childprotection-parent/childprotection-parent.component.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,15 @@ <h3>Your records as a <strong>parent</strong> from a child protection investigat
1818

1919
<div class="form-check form-check-inline" *ngFor="let subitem of item.suboptions; let si = subindex">
2020
<input class="form-check-input" type="checkbox" [value]="subitem.option" [checked]="subitem.selected" (change)="selectedsuboption(subitem)" />
21-
<label [title]="subitem.description" class="form-check-label" for="flexCheckDefault">
21+
<label class="form-check-label" for="flexCheckDefault">
2222
{{subitem.option}}
2323
</label>
24+
<div class="icon-tooltip-wrapper">
25+
<fa-icon class="info-icon" icon="info-circle"></fa-icon>
26+
<div class="custom-tooltip">
27+
{{subitem.description}}
28+
</div>
29+
</div>
2430
</div>
2531

2632
</div>

‎web/src/app/route-components/childprotection-parent/childprotection-parent.component.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,52 @@
2222
padding-left: 4px;
2323
}
2424
}
25+
}
26+
27+
.icon-tooltip-wrapper {
28+
position: relative;
29+
display: inline-block;
30+
margin-left: 5px;
31+
}
32+
33+
.info-icon {
34+
font-size: 0.8em;
35+
cursor: pointer;
36+
}
37+
38+
.custom-tooltip {
39+
visibility: hidden;
40+
opacity: 0;
41+
position: absolute;
42+
background-color: white;
43+
color: #494949;
44+
text-align: center;
45+
border-radius: 4px;
46+
border: solid 1px rgba(0, 0, 0, 0.2);
47+
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
48+
padding: 4px 8px;
49+
font-size: 0.8em;
50+
min-width: 350px;
51+
z-index: 10;
52+
53+
/* Positioning the tooltip */
54+
top: 50%; /* Align vertically with the icon */
55+
left: calc(100% + 5px); /* Slightly to the right of the icon */
56+
transform: translateY(-50%); /* Center vertically */
57+
}
58+
59+
.icon-tooltip-wrapper:hover .custom-tooltip {
60+
animation: show-tooltip 0.1s forwards;
61+
animation-delay: 1s;
62+
}
63+
64+
@keyframes show-tooltip {
65+
0% {
66+
visibility: hidden;
67+
opacity: 0;
68+
}
69+
100% {
70+
visibility: visible;
71+
opacity: 1;
72+
}
2573
}

‎web/src/app/route-components/youthincare-child/youthincare-child.component.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ <h3>Your records as a <strong>child/youth</strong> in care or receiving services
2323
<label class="form-check-label" for="flexCheckDefault">
2424
{{subitem.option}}
2525
</label>
26+
<div class="icon-tooltip-wrapper" *ngIf="subitem.description">
27+
<fa-icon class="info-icon" icon="info-circle"></fa-icon>
28+
<div class="custom-tooltip">
29+
{{subitem.description}}
30+
</div>
31+
</div>
2632
</div>
2733

2834
</div>

‎web/src/app/route-components/youthincare-child/youthincare-child.component.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,52 @@
2929
padding-left: 4px;
3030
}
3131
}
32+
}
33+
34+
.icon-tooltip-wrapper {
35+
position: relative;
36+
display: inline-block;
37+
margin-left: 5px;
38+
}
39+
40+
.info-icon {
41+
font-size: 0.8em;
42+
cursor: pointer;
43+
}
44+
45+
.custom-tooltip {
46+
visibility: hidden;
47+
opacity: 0;
48+
position: absolute;
49+
background-color: white;
50+
color: #494949;
51+
text-align: center;
52+
border-radius: 4px;
53+
border: solid 1px rgba(0, 0, 0, 0.2);
54+
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
55+
padding: 4px 8px;
56+
font-size: 0.8em;
57+
min-width: 350px;
58+
z-index: 10;
59+
60+
/* Positioning the tooltip */
61+
top: 50%; /* Align vertically with the icon */
62+
left: calc(100% + 5px); /* Slightly to the right of the icon */
63+
transform: translateY(-50%); /* Center vertically */
64+
}
65+
66+
.icon-tooltip-wrapper:hover .custom-tooltip {
67+
animation: show-tooltip 0.1s forwards;
68+
animation-delay: 1s;
69+
}
70+
71+
@keyframes show-tooltip {
72+
0% {
73+
visibility: hidden;
74+
opacity: 0;
75+
}
76+
100% {
77+
visibility: visible;
78+
opacity: 1;
79+
}
3280
}

‎web/src/app/route-components/youthincare-parent/youthincare-parent.component.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,15 @@ <h3>Your records as a <strong>parent</strong> of a child/youth in care or receiv
1717

1818
<div class="form-check form-check-inline" *ngFor="let subitem of item.suboptions; let si = subindex">
1919
<input class="form-check-input" type="checkbox" [value]="subitem.option" [checked]="subitem.selected" (change)="selectedsuboption(subitem)" />
20-
<label [title]="subitem.description" class="form-check-label" for="flexCheckDefault">
20+
<label class="form-check-label" for="flexCheckDefault">
2121
{{subitem.option}}
2222
</label>
23+
<div class="icon-tooltip-wrapper">
24+
<fa-icon class="info-icon" icon="info-circle"></fa-icon>
25+
<div class="custom-tooltip">
26+
{{subitem.description}}
27+
</div>
28+
</div>
2329
</div>
2430

2531
</div>

‎web/src/app/route-components/youthincare-parent/youthincare-parent.component.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,52 @@
2222
padding-left: 4px;
2323
}
2424
}
25+
}
26+
27+
.icon-tooltip-wrapper {
28+
position: relative;
29+
display: inline-block;
30+
margin-left: 5px;
31+
}
32+
33+
.info-icon {
34+
font-size: 0.8em;
35+
cursor: pointer;
36+
}
37+
38+
.custom-tooltip {
39+
visibility: hidden;
40+
opacity: 0;
41+
position: absolute;
42+
background-color: white;
43+
color: #494949;
44+
text-align: center;
45+
border-radius: 4px;
46+
border: solid 1px rgba(0, 0, 0, 0.2);
47+
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
48+
padding: 4px 8px;
49+
font-size: 0.8em;
50+
min-width: 350px;
51+
z-index: 10;
52+
53+
/* Positioning the tooltip */
54+
top: 50%; /* Align vertically with the icon */
55+
left: calc(100% + 5px); /* Slightly to the right of the icon */
56+
transform: translateY(-50%); /* Center vertically */
57+
}
58+
59+
.icon-tooltip-wrapper:hover .custom-tooltip {
60+
animation: show-tooltip 0.1s forwards;
61+
animation-delay: 1s;
62+
}
63+
64+
@keyframes show-tooltip {
65+
0% {
66+
visibility: hidden;
67+
opacity: 0;
68+
}
69+
100% {
70+
visibility: visible;
71+
opacity: 1;
72+
}
2573
}

‎web/src/app/services/data.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -117,20 +117,20 @@
117117
],
118118
"youthincarechild":[
119119
{ "mainoption":"Child in Care Records" , "suboptions":[
120-
{"option":"Personal History, Recordings & Service Plans"},
120+
{"option":"Personal History, Recordings & Service Plans", "description":"Contains file recordings, personal history and personal identification information"},
121121
{"option":"Cultural Planning / Roots"},
122-
{"option":"Legal & Agreements"},
123-
{"option":"Financial Documentation"},
124-
{"option":"External Assessment & Reports"},
125-
{"option":"Medical"},
126-
{"option":"Internal Assessments"},
127-
{"option":"Reviews"},
128-
{"option":"Adoption"},
129-
{"option":"Out of Care Services"},
130-
{"option":"General Correspondence"},
131-
{"option":"Collaborative Planning & Decisions Making"},
122+
{"option":"Legal & Agreements", "description":"Contains court order in-care records, and relevant legal and agreement related correspondence"},
123+
{"option":"Financial Documentation", "description":"Contains records and correspondence relating to the financial support services provided to a family"},
124+
{"option":"External Assessment & Reports", "description":"Contains all reports and assessments obtained from other ministries, agencies and external professionals (e.g., psychologists)"},
125+
{"option":"Medical", "description":"Contains records relating to the medical history of the family"},
126+
{"option":"Internal Assessments", "description":"Contains records relating to assessment strengths and risk"},
127+
{"option":"Reviews", "description":"Contains records relating to case reviews, complaints and related correspondence"},
128+
{"option":"Adoption", "description":"Contains records relating to a pending adoption, and when the adoption file is opened the information is copied into an appropriate adoption file - this may be applicable to a child in care placed for adoption"},
129+
{"option":"Out of Care Services", "description":"Contains records related to children that are in out of care arrangement"},
130+
{"option":"General Correspondence", "description":"Contains correspondence and records of a general nature not found elsewhere in the file"},
131+
{"option":"Collaborative Planning & Decisions Making", "description":"Contains legal documentation and correspondence related to a family participating in the Collaborative Planning and Decision-Making programs also known as ADR"},
132132
{"option":"Education, Employment & Training"},
133-
{"option":"Case Notes"}
133+
{"option":"Case Notes", "description":"Contains practitioner (social worker) case notes"}
134134

135135
] },
136136
{

0 commit comments

Comments
 (0)