summaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/tooltip.directive.exp.ts
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/tooltip.directive.exp.ts')
-rw-r--r--stories/ng2-component-lab/tooltip.directive.exp.ts231
1 files changed, 231 insertions, 0 deletions
diff --git a/stories/ng2-component-lab/tooltip.directive.exp.ts b/stories/ng2-component-lab/tooltip.directive.exp.ts
new file mode 100644
index 0000000..9e1dd0b
--- /dev/null
+++ b/stories/ng2-component-lab/tooltip.directive.exp.ts
@@ -0,0 +1,231 @@
+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>
+ `
+ },
+ ]);