DIG-4453: Tooltip Component

components/base/tooltip/tooltip.hbs

@@ -0,0 +1,31 @@
+<div class="wrapper">
+  <div class="wrapper--label">
+    <label>Default Tool Tip</label>
+
+    <!---  START: ToolTip Component --->
+    <div class="tt">
+      <div class="icon" />
+      <div class="msg">
+        This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+      </div>
+    </div>
+    <!---  END: ToolTip Component --->
+  </div>
+</div>
+
+<br /><br />
+
+<div class="wrapper">
+  <div class="wrapper--label">
+    <label>Tool Tip w/`i` icon</label>
+
+    <!---  START: ToolTip Component --->
+    <div class="tt">
+      <div class="icon tt--info" />
+      <div class="msg">
+        This information is collected to ensure the marriage abides by Massachusetts State Law Chapter 207 Sections 1-8.
+      </div>
+    </div>
+    <!---  END: ToolTip Component --->
+  </div>
+</div>

components/base/tooltip/tooltip.yml

@@ -0,0 +1,3 @@
+title: ToolTip
+handle: tt
+status: ready

scripts/components/tooltip.js

@@ -0,0 +1,5 @@
+'use strict'
+// This module controls the City of Boston table component
+// ---------------------------
+
+

stylesheets/components/tooltip/_component.styl

@@ -0,0 +1,92 @@
+/*
+
+   ToolTip
+
+   Base:
+    tt
+
+   Elements:
+    c = Container
+    i = icon
+    w = Tool Tip Wrapper
+ */
+
+.tt
+  position: relative;
+  display: inline-block;
+  margin-left: 0.25em;
+  padding: 0;
+
+  .icon
+    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
+
+    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
+      &::before { content: 'i' }
+
+  .msg
+    display: none
+    position: absolute
+    line-height: normal
+    z-index: 1000
+    left: 110%
+    top: -10%
+
+    min-width: 250px
+    max-width: 300px
+
+    padding: 0.25em 0.5em
+    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;
+  }
+}

stylesheets/components/tooltip/base.styl

@@ -0,0 +1,7 @@
+/*
+
+   SECTION HEADER
+
+*/
+
+@require('*.styl')

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