diff --git a/public/index.html b/public/index.html index d0fc6fa..31de794 100644 --- a/public/index.html +++ b/public/index.html @@ -38,8 +38,9 @@
  • Status
    • -

    - +

    + +

    DS2 core

    @@ -63,9 +64,9 @@

    Switch Complete

    -
    -

    Tooltip - In progress

    +
    +

    Tooltip + Complete

    Layouts diff --git a/public/patterns/core/status/index.html b/public/patterns/core/status/index.html index 7e86f5b..bb72b18 100644 --- a/public/patterns/core/status/index.html +++ b/public/patterns/core/status/index.html @@ -38,7 +38,7 @@ Tooltip - In progress + Complete @@ -77,7 +77,7 @@ Not started (0) - In progress (4) + In progress (3) Breakpoints @@ -92,11 +92,7 @@ Layouts - Tooltip - Components - - - Complete (6) + Complete (7) Colours @@ -122,6 +118,10 @@ Switch Components + + Tooltip + Components + Deprecated (1) @@ -187,7 +187,7 @@ Tooltip - In Progress + Complete Components diff --git a/public/patterns/core/tooltip/index.html b/public/patterns/core/tooltip/index.html index 0ec27d1..eaa3f2c 100644 --- a/public/patterns/core/tooltip/index.html +++ b/public/patterns/core/tooltip/index.html @@ -5,9 +5,13 @@

    What is it

    +

    Tooltips provide brief information messaging through a mouse or keyboard hover.

    When to use it

    +

    Use tool tips to provide additional information. Don't use tooltips for that is required to complete an interaction as the information disappears when it loses the hover state.

    +

    Use tooltips to help differentiate between multiple, close, similar options.

    How to use it

    -

    Either form works. Place this inside another element for the tooltip to be "linked to that element."

    +

    Currently, there is no easy way to activate a hover without with pure CSS without using a keyboard or mouse. Level4 media queries aim to solve that.

    +

    Either form works. Place this inside another element for the tooltip to be 'linked to that element.' A container element may need to be added for a single tag element, such as a input field.

    Tool tip positions are:

    • top / block-start
      • @@ -15,15 +19,11 @@
    • bottom / block-end
    • left / inline-start
    +

    Link with a tool tipTool tip content

    - 
    Link with a tool tip
-          
    Tool tip content
    Link with a tool tip
-          Tool tip content
    + 
    Link with a tool tipTool tip content
    a(href="#") Link with a tool tip
-	div(role="tooltip" inert tip-position="bottom") Tool tip content
-
-a(href="#") Link with a tool tip
-	tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content
    + span(role="tooltip" inert tip-position="right") Tool tip content 
    /* Position Options
 	- top / block-start
 	- right / inline-end
diff --git a/src/pg/_config.pug b/src/pg/_config.pug
index 1d781be..357f2f0 100644
--- a/src/pg/_config.pug
+++ b/src/pg/_config.pug
@@ -32,7 +32,7 @@
 				},
 				{
 					name: "tooltip",
-					status: "in-progress",
+					status: "complete",
 					core: true,
 				},
 			]
diff --git a/src/pg/index.pug b/src/pg/index.pug
index f78b662..78f3703 100644
--- a/src/pg/index.pug
+++ b/src/pg/index.pug
@@ -16,7 +16,10 @@ block header
 				li(class= navClass)
 					a(href="./?p=" + first.name.toPath() )= first.name.toContent().toSentenceCase()
 
-	p.deprecated-switch
+	p.info-switches
 		span
 		span#deprecated(role="switch")
-		label(for="deprecated") Show deprecated patterns
\ No newline at end of file
+		label(for="deprecated") Show deprecated patterns
+		span
+		span#breakpoints(role="switch")
+		label(for="breakpoints") Show breakpoint information
\ No newline at end of file
diff --git a/src/pg/patterns/core/tooltip/_tooltip.pp b/src/pg/patterns/core/tooltip/_tooltip.pp
index d118dc5..57368dd 100644
--- a/src/pg/patterns/core/tooltip/_tooltip.pp
+++ b/src/pg/patterns/core/tooltip/_tooltip.pp
@@ -1,5 +1,2 @@
 a(href="#") Link with a tool tip
-	div(role="tooltip" inert tip-position="bottom") Tool tip content
-
-a(href="#") Link with a tool tip
-	tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content
\ No newline at end of file
+	span(role="tooltip" inert tip-position="right") Tool tip content
\ No newline at end of file
diff --git a/src/pg/patterns/core/tooltip/_tooltip.pug b/src/pg/patterns/core/tooltip/_tooltip.pug
index d118dc5..57368dd 100644
--- a/src/pg/patterns/core/tooltip/_tooltip.pug
+++ b/src/pg/patterns/core/tooltip/_tooltip.pug
@@ -1,5 +1,2 @@
 a(href="#") Link with a tool tip
-	div(role="tooltip" inert tip-position="bottom") Tool tip content
-
-a(href="#") Link with a tool tip
-	tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content
\ No newline at end of file
+	span(role="tooltip" inert tip-position="right") Tool tip content
\ No newline at end of file
diff --git a/src/pg/patterns/core/tooltip/index.pug b/src/pg/patterns/core/tooltip/index.pug
index 879a78f..9067cb0 100644
--- a/src/pg/patterns/core/tooltip/index.pug
+++ b/src/pg/patterns/core/tooltip/index.pug
@@ -5,12 +5,17 @@ extends ../../../core/_master-pattern
 block content
 
 	+h(0)
-	
+	p Tooltips provide brief information messaging through a mouse or keyboard hover. 
 	+h(1)
+	p Use tool tips to provide additional information. Don't use tooltips for that is required to complete an interaction as the information disappears when it loses the hover state. 
 	
+	p Use tooltips to help differentiate between multiple, close, similar options. 
+
 	+h(2)
 
-	p Either form works. Place this inside another element for the tooltip to be "linked to that element."
+	p.notification-box.info Currently, there is no easy way to activate a hover without with pure CSS without using a keyboard or mouse. Level4 media queries aim to solve that.
+
+	p Either form works. Place this inside another element for the tooltip to be 'linked to that element.' A container element may need to be added for a single tag element, such as a input field. 
 
 	p Tool tip positions are: 
 	ul 
@@ -19,6 +24,9 @@ block content
 		li bottom / block-end
 		li left / inline-start
 
+	p
+		include _tooltip.pug
+
 
 	div#tooltip.tab-group
 		pre.language-html(data-tab="html")