| import { experimentOn } from '@islavi/ng2-component-lab'; |
| import { ArrowPlacement, TooltipPlacement } from '../../src/angular/tooltip/tooltip.directive'; |
| |
| const customTemplate = ` |
| .sdc-custom-tooltip-template-title { |
| font-size: 20px; |
| font-weight: bold; |
| background-color: $black; |
| color: $white; |
| text-align: center; |
| } |
| |
| .sdc-custom-tooltip-template-content { |
| background-color: $black; |
| color: $white; |
| display: inline-block; |
| text-align: center; |
| } |
| |
| .sdc-custom-tooltip-template-image { |
| width: 100%; |
| height:100%; |
| display: inline-block; |
| text-align: center; |
| background-color: #ffffff; |
| } |
| `; |
| |
| export default experimentOn('Tooltip') |
| .group("Tooltip",[ |
| { |
| id: 'leftAlignmentTextTooltip', |
| showSource: true, |
| title: 'Tooltip with short text (left placement)', |
| description: 'left placement', |
| context: { |
| placement: TooltipPlacement.Left, |
| arrowPlacement: ArrowPlacement.LeftTop |
| }, |
| template: ` |
| <div style="padding-bottom: 20px; width: 350px;">Lorem ipsum dolor sit amet, |
| <span style="color: #009fdb" |
| sdc-tooltip |
| tooltip-text = 'A short text name, short text' |
| [tooltip-placement]= 'placement' |
| [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip |
| </span> |
| ,consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. |
| Integer pulvinar pellentesque accumsan. |
| <span style="color: #009fdb" |
| sdc-tooltip |
| tooltip-text = 'A short text name, short text' |
| [tooltip-placement]= 'placement' |
| [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip |
| </span> |
| Sed hendrerit lacus eu tempus pharetra |
| </div> |
| ` |
| }, |
| { |
| id: 'leftAlignmentMultiLineTextTooltip', |
| showSource: true, |
| title: 'Tooltip with multi line text (left placement)', |
| description: 'left placement', |
| context: { |
| placement: TooltipPlacement.Left, |
| arrowPlacement: ArrowPlacement.LeftTop |
| }, |
| template: ` |
| <div style="padding-bottom: 20px;"> |
| The is text example, |
| <span style="color: #009fdb" |
| sdc-tooltip |
| tooltip-text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra' |
| [tooltip-placement]= 'placement' |
| [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip |
| </span> |
| , more text |
| </div> |
| ` |
| }, |
| { |
| id: 'customStyleTooltip', |
| showSource: true, |
| title: 'Tooltip with custom style', |
| description: 'Tooltip with custom style, define your class and style it via css.', |
| context: { |
| text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra' |
| }, |
| template: ` |
| <![CDATA[ |
| .sdc-custom-tooltip { |
| background-color: $dark-blue; |
| border-color: $dark-blue; |
| border-radius: 10px; |
| } |
| ]]> |
| <div style="padding-bottom: 20px;"> |
| Some text example, |
| <span style="color: #009fdb" sdc-tooltip [tooltip-text]=text tooltip-css-class='sdc-custom-tooltip'>show tooltip</span>, more text |
| </div> |
| ` |
| }, |
| { |
| id: 'rightAlignmentHtmlTooltip', |
| showSource: true, |
| title: 'Tooltip with HTML template (right placement)', |
| description: 'right placement', |
| context: { |
| placement: TooltipPlacement.Right, |
| arrowPlacement: ArrowPlacement.LeftTop |
| }, |
| styles: [customTemplate], |
| template: ` |
| Template Input: |
| <pre><![CDATA[ |
| <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" /> |
| <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p> |
| ]]></pre> |
| |
| <div style="padding-bottom: 20px;"> |
| The is text example, |
| <span style="color: #009fdb" |
| sdc-tooltip |
| tooltip-text = 'This is the tooltip test' |
| [tooltip-placement]= 'placement' |
| [tooltip-arrow-placement] = 'arrowPlacement' |
| [tooltip-template]='template'>show tooltip |
| </span> |
| , more text |
| </div> |
| |
| <template #template> |
| <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" /> |
| <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p> |
| </template> |
| ` |
| }, |
| { |
| id: 'rightAlignmentHtmlCustomStyleTooltip', |
| showSource: true, |
| title: 'Tooltip with HTML template and custom style (right placement)', |
| description: 'right placement', |
| context: { |
| placement: TooltipPlacement.Right, |
| arrowPlacement: ArrowPlacement.LeftTop |
| }, |
| styles: [customTemplate], |
| template: ` |
| Template Input: |
| <pre><![CDATA[ |
| <p class="sdc-custom-tooltip-template-title sdc-tooltip-template-big-title">Title... Title... Title... Title... Title...</p> |
| <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" /> |
| <p class="sdc-custom-tooltip-template-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</p> |
| ]]></pre> |
| |
| <div style="padding-bottom: 20px;"> |
| The is text example, |
| <span style="color: #009fdb" |
| sdc-tooltip |
| tooltip-text = 'This is the tooltip test' |
| [tooltip-placement]= 'placement' |
| tooltip-css-class = 'sdc-custom-tooltip' |
| [tooltip-arrow-placement] = 'arrowPlacement' |
| [tooltip-template]='template'>show tooltip |
| </span> |
| , more text |
| </div> |
| |
| <template #template> |
| <p class="sdc-custom-tooltip-template-title sdc-tooltip-template-big-title">Title... Title... Title... Title... Title...</p> |
| <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" /> |
| <p class="sdc-custom-tooltip-template-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</p> |
| </template> |
| ` |
| }, |
| { |
| id: 'topAlignmentTextTooltip', |
| showSource: true, |
| title: 'Tooltip with text (top placement)', |
| description: 'top placement', |
| context: { |
| placement: TooltipPlacement.Top, |
| arrowPlacement: ArrowPlacement.LeftTop |
| }, |
| template: ` |
| <div style="padding-bottom: 20px;"> |
| The is text example, |
| <span style="color: #009fdb" |
| sdc-tooltip |
| tooltip-text = 'A long text name, very long, long text' |
| [tooltip-placement]= 'placement' |
| [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip |
| </span> |
| , more text |
| </div> |
| ` |
| }, |
| { |
| id: 'bottomAlignmentHtmlTooltip', |
| showSource: true, |
| title: 'Tooltip with HTML template (bottom placement)', |
| description: 'bottom placement', |
| context: { |
| placement: TooltipPlacement.Bottom, |
| arrowPlacement: ArrowPlacement.LeftTop |
| }, |
| template: ` |
| Template Input: |
| <pre><![CDATA[ |
| <div class="sdc-tooltip-template-content">A long text name,</div> |
| <div class="sdc-tooltip-template-content">very long, long text</div> |
| ]]></pre> |
| |
| <div style="width:30%; height: 30px; text-align: center;"> |
| The is text example, |
| <a style="color: #009fdb; font-size: small; cursor: pointer;" |
| sdc-tooltip |
| tooltip-text = 'This is the tooltip test' |
| [tooltip-placement]= 'placement' |
| [tooltip-arrow-placement] = 'arrowPlacement' |
| [tooltip-template]='template' >link example</a> |
| , more text |
| </div> |
| <template #template> |
| <div class="sdc-tooltip-template-content">A long text name,</div> |
| <div class="sdc-tooltip-template-content">very long, long text</div> |
| </template> |
| ` |
| }, |
| ]); |