feat(tooltip): add definition tooltip #714
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| ### JavaScript | ||
|
|
||
| #### Attributes | ||
|
|
||
| | Name | Param | Description | | ||
| |--------------------------|-----------------------------|--------------------------------------------------------------------------------------| | ||
| | data-tooltip-target | Any unique CSS selector | The selector, typically an id, to find the tooltip corresponding to the trigger. | | ||
| | data-tooltip-direction | Left, top, right, or bottom | Setting this attribute overrides the directions set by this.options.tooltipDirection | | ||
|
|
||
| #### Public Methods | ||
|
|
||
| | Name | Params | Description | | ||
| |---------|--------|------------------------------------------------------------| | ||
| | show | | Shows the tooltip. | | ||
| | hide | | Hides the tooltip. | | ||
| | release | | Deletes the instance and removes document event listeners. | | ||
|
|
||
| #### Options | ||
|
|
||
| | Option | Default Selector | Description | | ||
| |--------------------------|---------------------------------|----------------------------------------------------------------------------------------| | ||
| | `selectorInit` | `[data-tooltip-trigger]` | The CSS selector to find the tooltip. | ||
| | `objMenuOffset` | `{ top: 10, left: 0 }` | An object containing the top and left offset values in px | ||
|
|
||
| ### Simple tooltip | ||
|
|
||
| This tooltip variation does not use any JavaScript and is good for short single line of text. For anything more advanced please use the main variation. | ||
|
|
||
| | Selector | Description | | ||
| |------------------------------|-------------------------------------------------------| | ||
| | .bx--tooltip--simple__top | A simple tooltip that is displayed above the trigger. | | ||
| | .bx--tooltip--simple__bottom | A simple tooltip that is displayed below the trigger. | | ||
|
|
||
| To set the content of the tooltip place your text in the `data-tooltip-text` attribute. Keep in mind that the simple tooltip does not support more than a single line of text and no other types of content. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,273 @@ | ||
| @import '../../globals/scss/vars'; | ||
| @import '../../globals/scss/colors'; | ||
| @import '../../globals/scss/spacing'; | ||
| @import '../../globals/scss/layer'; | ||
| @import '../../globals/scss/typography'; | ||
| @import '../../globals/scss/helper-mixins'; | ||
| @import '../../globals/scss/import-once'; | ||
| @import '../../globals/scss/css--reset'; | ||
| @import '../../globals/scss/css--typography'; | ||
|
|
||
| @include exports('tooltip-v2') { | ||
| .#{$prefix}--tooltip-v2--simple { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .#{$prefix}--tooltip-v2__trigger { | ||
| @include font-family; | ||
| @include typescale('epsilon'); | ||
| display: inline-flex; | ||
| align-items: center; | ||
| color: $text-01; | ||
| font-weight: 600; | ||
|
|
||
| svg { | ||
| fill: $brand-01; | ||
| margin-left: $spacing-xs; | ||
| cursor: pointer; | ||
|
|
||
| &:focus { | ||
| @include focus-outline('border'); | ||
| fill: $brand-02; | ||
| } | ||
| } | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| svg { | ||
| fill: $brand-02; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .#{$prefix}--tooltip-v2 { | ||
| @include layer('overlay'); | ||
| @include reset; | ||
| position: absolute; | ||
| display: none; | ||
| max-width: rem(240px); | ||
| background: $ui-01; | ||
| margin-top: $spacing-xs; | ||
| padding: $spacing-md; | ||
| border: 1px solid $ui-04; | ||
| border-radius: 4px; | ||
| z-index: z('floating'); | ||
|
|
||
| p { | ||
| @include font-family; | ||
| @include typescale('zeta'); | ||
| } | ||
|
|
||
| .#{$prefix}--tooltip-v2__label { | ||
| font-weight: 600; | ||
| margin-bottom: $spacing-xs; | ||
| } | ||
|
|
||
| &:before { | ||
| position: absolute; | ||
| background: $ui-01; | ||
| left: 0; | ||
| top: rem(-6px); | ||
| right: 0; | ||
| transform: rotate(-135deg); | ||
| width: 0.6rem; | ||
| height: 0.6rem; | ||
| border-right: 1px solid $ui-04; | ||
| border-bottom: 1px solid $ui-04; | ||
| margin: 0 auto; | ||
| content: ''; | ||
| } | ||
|
|
||
| &[data-floating-menu-direction='left'] { | ||
| margin-left: -$spacing-sm; | ||
|
|
||
| &:before { | ||
| left: auto; | ||
| top: 44.7%; | ||
| right: rem(-6px); | ||
| transform: rotate(-45deg); | ||
| } | ||
| } | ||
|
|
||
| &[data-floating-menu-direction='top'] { | ||
| &:before { | ||
| top: auto; | ||
| bottom: rem(-6px); | ||
| transform: rotate(45deg); | ||
| } | ||
| } | ||
|
|
||
| &[data-floating-menu-direction='right'] { | ||
| margin-left: $spacing-sm; | ||
|
|
||
| &:before { | ||
| left: rem(-6px); | ||
| top: 44.7%; | ||
| right: auto; | ||
| transform: rotate(135deg); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .#{$prefix}--tooltip-v2--shown { | ||
| display: block; | ||
| } | ||
|
|
||
| // Simple Icon CSS only tooltip | ||
| .#{$prefix}--tooltip--simple-v2__top, | ||
| .#{$prefix}--tooltip--simple-v2__bottom { | ||
| @include font-family; | ||
| @include reset; | ||
| @include typescale('delta'); | ||
| position: relative; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| cursor: pointer; | ||
|
|
||
| svg { | ||
| fill: $brand-01; | ||
| margin-left: $spacing-xs; | ||
| } | ||
|
|
||
| // Tooltip - renders as a combo of :before and :after elements | ||
| &:before, | ||
| &:after { | ||
| @include font-family; | ||
| position: absolute; | ||
| display: none; | ||
| background: $ui-01; | ||
| } | ||
|
|
||
| &:before { | ||
| @include typescale('zeta'); | ||
| @include layer('overlay'); | ||
| max-width: rem(170px); | ||
| padding: rem(10px) $spacing-xs; | ||
| border: 1px solid $ui-04; | ||
| border-radius: 4px; | ||
| color: $text-01; | ||
| content: attr(data-tooltip-text); | ||
| white-space: nowrap; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| &:after { | ||
| right: 0; | ||
| left: 0; | ||
| width: 0.6rem; | ||
| height: 0.6rem; | ||
| border-right: 1px solid $ui-04; | ||
| border-bottom: 1px solid $ui-04; | ||
| margin: 0 auto; | ||
| content: ''; | ||
| } | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| svg { | ||
| fill: $brand-02; | ||
| } | ||
|
|
||
| &:before, | ||
| &:after { | ||
| position: absolute; | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| &:focus { | ||
| outline: 1px solid transparent; | ||
|
|
||
| svg { | ||
| @include focus-outline('border'); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Tooltip caret - top position | ||
| .#{$prefix}--tooltip--simple-v2__top { | ||
| &:before { | ||
| bottom: 1.8rem; | ||
| } | ||
|
|
||
| &:after { | ||
| bottom: 1.5rem; | ||
| transform: rotate(45deg); | ||
| } | ||
| } | ||
|
|
||
| // Tooltip caret - bottom position | ||
| .#{$prefix}--tooltip--simple-v2__bottom { | ||
| &:before { | ||
| top: 1.8rem; | ||
| } | ||
|
|
||
| &:after { | ||
| top: 1.5rem; | ||
| transform: rotate(-135deg); | ||
| } | ||
| } | ||
|
|
||
| // Tooltip Definition | ||
| .#{$prefix}--tooltip-v2--definition { | ||
| .#{$prefix}--tooltip--simple-v2__bottom, | ||
| .#{$prefix}--tooltip--simple-v2__top { | ||
| &:after { | ||
| margin-left: rem(24px); | ||
| } | ||
|
|
||
| &:before, | ||
| &:after { | ||
| border: none; | ||
| background: black; // change to $inverse-02 after TJ's PR | ||
| color: $inverse-01; | ||
| } | ||
|
|
||
| &:focus .#{$prefix}--tooltip-v2__trigger { | ||
| @include focus-outline('border'); | ||
| // border-bottom: 2px dotted $hover-primary; *uncomment after TJ's PR | ||
| } | ||
| } | ||
|
|
||
| .#{$prefix}--tooltip--simple-v2__top { | ||
| &:before { | ||
| bottom: 2.2rem; | ||
| } | ||
|
|
||
| &:after { | ||
| bottom: 2rem; | ||
| } | ||
| } | ||
|
|
||
| .#{$prefix}--tooltip--simple-v2__bottom { | ||
| &:before { | ||
| top: 2.2rem; | ||
| } | ||
|
|
||
| &:after { | ||
| top: 2rem; | ||
| } | ||
| } | ||
|
|
||
| .#{$prefix}--tooltip-v2__trigger { | ||
| border-bottom: 2px dotted $brand-01; | ||
|
|
||
| &:hover { | ||
| cursor: pointer; | ||
| // border-bottom: 2px dotted $hover-primary; *uncomment after TJ's PR | ||
| } | ||
| } | ||
| } | ||
|
|
||
| //Tooltip Icon Simple | ||
| .#{$prefix}--tooltip-v2--simple { | ||
| .#{$prefix}--tooltip--simple-v2__bottom, | ||
| .#{$prefix}--tooltip--simple-v2__top { | ||
| &:before { | ||
| margin-left: 50%; | ||
| transform: translateX(-50%); | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| ### HTML | ||
|
|
||
| There are now two major variations of this component. The original tooltip is now in `tooltip--simple.html`. You should only use this variation if the contents of tooltip are text and limited to a single line. Multi-line is not supported. Previously `[data-tooltip]` contained the tooltip's text. It's been renamed to `[data-tooltip-text]`. | ||
|
|
||
| `tooltip.html` contains the new and improved component. This variation not only supports multi-line content but also icons and other elements. For full details on usage see the tooltip README and `tooltip.html` files. | ||
|
|
||
| ### SCSS | ||
|
|
||
| The `_tooltip.scss` file is now located at `src/components/tooltip/_tooltip.scss`. You will need to update any `@import` statements for this file to reflect this change. | ||
|
|
||
| **New**: | ||
| ```scss | ||
| @import 'path_to_node_modules/carbon-components/src/components/tooltip/tooltip'; | ||
| ``` | ||
|
|
||
| **Old**: | ||
| ```scss | ||
| @import 'path_to_node_modules/@console/bluemix-components/src/components/tooltip/tooltip; | ||
| ``` | ||
|
|
||
| `.bx--tooltip__top` and `.bx--tooltip__bottom` are now `.bx--tooltip--simple__top` and `.bx--tooltip--simple__bottom` | ||
|
|
||
| ### JavaScript | ||
|
|
||
| The old tooltip variation, which is now `tooltip--simple.html`, did not have any JavaScript. However, the new version does. This includes `show()`, `hide()`, and `release()` methods. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <div class="bx--tooltip-v2--definition"> | ||
| <div tabindex="0" class="bx--tooltip--simple-v2__bottom" data-tooltip-text="This is a definition tooltip."> | ||
| <p class="bx--tooltip-v2__trigger">Tooltip label</p> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <div class="bx--tooltip--simple-v2"> | ||
|
There was a problem hiding this comment. Should this class be |
||
| <p class="bx--tooltip-v2__trigger">Tooltip label</p> | ||
| <div tabindex="0" class="bx--tooltip--simple-v2__top" data-tooltip-text="Information"> | ||
| <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd"> | ||
| <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <a class="bx--tooltip-v2__trigger"> | ||
| Tooltip label | ||
| <svg tabindex="0" data-tooltip-v2-trigger data-tooltip-target="#unique-tooltip-v2" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd"> | ||
| <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path> | ||
| </svg> | ||
| </a> | ||
| <div id="unique-tooltip-v2" data-floating-menu-direction="bottom" class="bx--tooltip-v2"> | ||
| <p class="bx--tooltip-v2__label">Tooltip subtitle</p> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | ||
| </div> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Given V2 is newly introduced component, does this migration guide still make sense? One thing that comes to my mind is V1 to V2 migration guide. Another approach may be simply keeping the README in-sync with what V2 does.