From 19ef2b4f69bd4f890ba6ed12846f0ffd133a48d1 Mon Sep 17 00:00:00 2001 From: Phillip Kelly Date: Mon, 1 Jul 2024 13:40:43 -0400 Subject: [PATCH 1/3] DIG-4453: Create Tooltip Component --- components/base/tooltip/tooltip.hbs | 3 ++ components/base/tooltip/tooltip.yml | 3 ++ scripts/components/tooltip.js | 5 +++ .../components/tooltip/_component.styl | 33 +++++++++++++++++++ stylesheets/components/tooltip/base.styl | 7 ++++ 5 files changed, 51 insertions(+) create mode 100644 components/base/tooltip/tooltip.hbs create mode 100644 components/base/tooltip/tooltip.yml create mode 100644 scripts/components/tooltip.js create mode 100644 stylesheets/components/tooltip/_component.styl create mode 100644 stylesheets/components/tooltip/base.styl diff --git a/components/base/tooltip/tooltip.hbs b/components/base/tooltip/tooltip.hbs new file mode 100644 index 00000000..270bc160 --- /dev/null +++ b/components/base/tooltip/tooltip.hbs @@ -0,0 +1,3 @@ +
+ Tool Tip Text ... +
diff --git a/components/base/tooltip/tooltip.yml b/components/base/tooltip/tooltip.yml new file mode 100644 index 00000000..f4f260cb --- /dev/null +++ b/components/base/tooltip/tooltip.yml @@ -0,0 +1,3 @@ +title: ToolTip +handle: tooltip +status: ready diff --git a/scripts/components/tooltip.js b/scripts/components/tooltip.js new file mode 100644 index 00000000..2d8dbd3f --- /dev/null +++ b/scripts/components/tooltip.js @@ -0,0 +1,5 @@ +'use strict' +// This module controls the City of Boston table component +// --------------------------- + + diff --git a/stylesheets/components/tooltip/_component.styl b/stylesheets/components/tooltip/_component.styl new file mode 100644 index 00000000..4b5c7a23 --- /dev/null +++ b/stylesheets/components/tooltip/_component.styl @@ -0,0 +1,33 @@ +/* + + ToolTip + + Base: + tt + + Elements: + c = Container + i = icon + w = Tool Tip Wrapper + */ + +.tooltip { + position: absolute; + padding: 20px 25px; + color: #ffffff; + background: #f2709c; + left: 20%; + top: 40%; +} + +.tooltip:before { + content: ""; + position: absolute; + border-top: 15px solid #f2709c; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + top: 100%; + left: 45%; + margin-left: -5px; + margin-top: -5px; +} diff --git a/stylesheets/components/tooltip/base.styl b/stylesheets/components/tooltip/base.styl new file mode 100644 index 00000000..8e082ac7 --- /dev/null +++ b/stylesheets/components/tooltip/base.styl @@ -0,0 +1,7 @@ +/* + + SECTION HEADER + +*/ + +@require('*.styl') From b8f23a71a649a998a166f4a3b06c24a7dba49aec Mon Sep 17 00:00:00 2001 From: Phillip Kelly Date: Mon, 1 Jul 2024 16:44:23 -0400 Subject: [PATCH 2/3] DIG-4453: Create Tooltip Component wip#2 --- components/base/tooltip/tooltip.hbs | 20 +++++- components/base/tooltip/tooltip.yml | 2 +- .../components/tooltip/_component.styl | 69 +++++++++++++------ stylesheets/variables/_colors.styl | 1 + 4 files changed, 69 insertions(+), 23 deletions(-) diff --git a/components/base/tooltip/tooltip.hbs b/components/base/tooltip/tooltip.hbs index 270bc160..49ce02c5 100644 --- a/components/base/tooltip/tooltip.hbs +++ b/components/base/tooltip/tooltip.hbs @@ -1,3 +1,19 @@ -
- Tool Tip Text ... +{{!-- Default Tool Tip --}} +

+ +
+
+
+ This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8. +
+
+ +


+ +{{!-- Tool Tip w/`i` icon --}} +
+
+
+ This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8. +
diff --git a/components/base/tooltip/tooltip.yml b/components/base/tooltip/tooltip.yml index f4f260cb..60ec73f2 100644 --- a/components/base/tooltip/tooltip.yml +++ b/components/base/tooltip/tooltip.yml @@ -1,3 +1,3 @@ title: ToolTip -handle: tooltip +handle: tt status: ready diff --git a/stylesheets/components/tooltip/_component.styl b/stylesheets/components/tooltip/_component.styl index 4b5c7a23..5c062ecb 100644 --- a/stylesheets/components/tooltip/_component.styl +++ b/stylesheets/components/tooltip/_component.styl @@ -11,23 +11,52 @@ w = Tool Tip Wrapper */ -.tooltip { - position: absolute; - padding: 20px 25px; - color: #ffffff; - background: #f2709c; - left: 20%; - top: 40%; -} - -.tooltip:before { - content: ""; - position: absolute; - border-top: 15px solid #f2709c; - border-left: 15px solid transparent; - border-right: 15px solid transparent; - top: 100%; - left: 45%; - margin-left: -5px; - margin-top: -5px; -} +.tt + position: relative + display: inline-block + margin: 0 + padding: 0 + + .icon + width: 10px + height: 10px + border-radius: 50% + font-size: 0.5rem + background: $optimistic-blue-dark + + margin: 5px 0.5em 0 5px + padding: 4.7px 0 0 3.0px + line-height: 0px + color: white + + &::before + content: '?' + + .tt--info + text-transform: lowercase + padding-left: 3.8px + &::before { content: 'i' } + + .msg + display: none + // display: block + position: absolute + font-size: 1.00rem + line-height: normal + background: $grey-000 + z-index: 1000 + left: 110% + top: -10% + + min-width: 200px + max-width: 300px + + padding: 0.25em 0.5em + color: $grey-400 + font-family: $serif + font-weight: 300 + font-style: italic + text-transform: initial + + .icon:hover .msg + display: block diff --git a/stylesheets/variables/_colors.styl b/stylesheets/variables/_colors.styl index c5125f7a..628203ee 100644 --- a/stylesheets/variables/_colors.styl +++ b/stylesheets/variables/_colors.styl @@ -32,6 +32,7 @@ $grey-000 = #f3f3f3 $grey-100 = #e0e0e0 $grey-200 = #C8C8C8 $grey-300 = #828282 +$grey-400 = #58585b $focus-indicator-color = $optimistic-blue-light $error-border-color = $freedom-red-light From 8529f76888509101f8c46fd0f40c630b5bb09dff Mon Sep 17 00:00:00 2001 From: Phillip Kelly Date: Tue, 2 Jul 2024 20:13:29 -0400 Subject: [PATCH 3/3] DIG-4453: Create Tooltip Component wip#3 --- components/base/tooltip/tooltip.hbs | 36 ++++++---- .../components/tooltip/_component.styl | 68 +++++++++++++------ 2 files changed, 73 insertions(+), 31 deletions(-) diff --git a/components/base/tooltip/tooltip.hbs b/components/base/tooltip/tooltip.hbs index 49ce02c5..c11cfd8a 100644 --- a/components/base/tooltip/tooltip.hbs +++ b/components/base/tooltip/tooltip.hbs @@ -1,19 +1,31 @@ -{{!-- Default Tool Tip --}} -

+
+
+ -
-
-
- This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8. + +
+
+
+ This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8. +
+
+
-


+

+ +
+
+ -{{!-- Tool Tip w/`i` icon --}} -
-
-
- This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8. + +
+
+
+ This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8. +
+
+
diff --git a/stylesheets/components/tooltip/_component.styl b/stylesheets/components/tooltip/_component.styl index 5c062ecb..7a9a4904 100644 --- a/stylesheets/components/tooltip/_component.styl +++ b/stylesheets/components/tooltip/_component.styl @@ -12,51 +12,81 @@ */ .tt - position: relative - display: inline-block - margin: 0 - padding: 0 + position: relative; + display: inline-block; + margin-left: 0.25em; + padding: 0; .icon - width: 10px - height: 10px - border-radius: 50% - font-size: 0.5rem background: $optimistic-blue-dark + // width: 10px + // height: 10px + // border-radius: 50% + // font-size: 0.5rem + + // margin: 5px 0.5em 0 5px + // padding: 4.7px 0 0 3.0px + // line-height: 0px + // color: white - margin: 5px 0.5em 0 5px - padding: 4.7px 0 0 3.0px - line-height: 0px + line-height: normal color: white + font-size: 0.5rem + text-align: center + width: 10px; + height: 10px; + border-radius: 50% &::before content: '?' .tt--info text-transform: lowercase - padding-left: 3.8px &::before { content: 'i' } .msg display: none - // display: block position: absolute - font-size: 1.00rem line-height: normal - background: $grey-000 z-index: 1000 left: 110% top: -10% - min-width: 200px + min-width: 250px max-width: 300px - + padding: 0.25em 0.5em - color: $grey-400 - font-family: $serif font-weight: 300 font-style: italic + font-size: 1.875em text-transform: initial + text-align: left + + background: $grey-000 + font-family: $serif + color: $grey-400 .icon:hover .msg display: block + + +.tt-wrapper { + display: block; + margin-bottom: 1em; +} + +.tt-wrapper--label { + display: flex; + flex-start: left; + align-items: center; + + label { + display: inline-block; + color: #091f2f; + font-family: "Lora", Georgia, serif; + font-size: 15px; + font-weight: 500; + line-height: 1.4; + letter-spacing: 1px; + } +}