bug(EJ2-4847): Fixed tooltip sample issue

pipeline · pipeline · commit 77102c896663 · 2017-10-17T06:00:48.000Z
diff --git a/src/tooltip/smartposition-plnkr.json b/src/tooltip/smartposition-plnkr.json
@@ -1 +1 @@
-{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Tooltip } from '@syncfusion/ej2-popups';\nimport { Draggable } from '@syncfusion/ej2-base';\n/**\n * tooltip sample\n */\n\n\n    let tooltip: Tooltip = new Tooltip({\n        content: 'Drag me anywhere, to start walking with me !!!',\n        offsetX: -15,\n        target: '#demoSmart',\n        animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n    });\n    tooltip.appendTo('#targetContainer');\n    let ele: HTMLElement = document.getElementById('demoSmart');\n    let drag: Draggable = new Draggable(ele, {\n        clone: false,\n        dragArea: '#targetContainer',\n        drag: (args: any) => {\n            if (args.element.getAttribute('data-tooltip-id') === null) {\n                tooltip.open(args.element);\n            } else {\n                tooltip.refresh(args.element);\n            }\n        },\n        dragStart: (args: any) => {\n            if (args.element.getAttribute('data-tooltip-id') !== null) { return; }\n            tooltip.open(args.element);\n        },\n        dragStop: (args: any) => {\n            tooltip.close();\n        }\n    });\n\n","index.html":"<!DOCTYPE html><html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<style type=\"text/css\">\n    #demoSmart {\n        width: 100px;\n        height: 100px;\n        background-image: url('http://npmci.syncfusion.com/production/demos/src/tooltip/images/smartposition.png');\n        background-size: 100px 100px;\n        position: absolute;\n        left: calc( 50% - 50px);\n        top: calc( 50% - 50px);\n    }\n\n    #targetContainer {\n        padding-left: 0;\n        padding-right: 0;\n        height: 100%;\n        width: 100%;\n    }\n</style>\n<div id=\"targetContainer\" class=\"col-lg-12 control-section\">\n    <div id=\"demoSmart\">\n    </div>\n</div>\n\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n        \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
+{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Tooltip } from '@syncfusion/ej2-popups';\nimport { Draggable } from '@syncfusion/ej2-base';\n/**\n * tooltip sample\n */\n\n\n    let tooltip: Tooltip = new Tooltip({\n        content: 'Drag me anywhere, to start walking with me !!!',\n        offsetX: -15,\n        target: '#demoSmart',\n        animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n    });\n    tooltip.appendTo('#targetContainer');\n    let ele: HTMLElement = document.getElementById('demoSmart');\n    let drag: Draggable = new Draggable(ele, {\n        clone: false,\n        dragArea: '#targetContainer',\n        drag: (args: any) => {\n            if (args.element.getAttribute('data-tooltip-id') === null) {\n                tooltip.open(args.element);\n            } else {\n                tooltip.refresh(args.element);\n            }\n        },\n        dragStart: (args: any) => {\n            if (args.element.getAttribute('data-tooltip-id') !== null) { return; }\n            tooltip.open(args.element);\n        },\n        dragStop: (args: any) => {\n            tooltip.close();\n        }\n    });\n\n","index.html":"<!DOCTYPE html><html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<style type=\"text/css\">\n    #demoSmart {\n        width: 100px;\n        height: 100px;\n        background-image: url('http://npmci.syncfusion.com/production/demos/src/tooltip/images/smartposition.png');\n        background-size: 100px 100px;\n        position: absolute;\n        left: calc( 50% - 50px);\n        top: calc( 50% - 50px);\n    }\n\n    #targetContainer {\n        min-height: 350px;\n        width: 100%;\n        padding-left: 0;\n        padding-right: 0;\n        float: left;\n        position: relative;\n        border: 1px solid #dddddd;\n        border-radius: 3px;\n    }\n</style>\n<div id=\"targetContainer\" class=\"col-lg-12 control-section\">\n    <div id=\"demoSmart\">\n    </div>\n</div>\n\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n        \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
diff --git a/src/tooltip/smartposition.html b/src/tooltip/smartposition.html
@@ -10,10 +10,14 @@
     }
 
     #targetContainer {
+        min-height: 350px;
+        width: 100%;
         padding-left: 0;
         padding-right: 0;
-        height: 100%;
-        width: 100%;
+        float: left;
+        position: relative;
+        border: 1px solid #dddddd;
+        border-radius: 3px;
     }
 </style>
 <div id="targetContainer" class="col-lg-12 control-section">

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Tooltip } from '@syncfusion/ej2-popups';\nimport { Draggable } from '@syncfusion/ej2-base';\n/*\n tooltip sample\n /\n\n\n let tooltip: Tooltip = new Tooltip({\n content: 'Drag me anywhere, to start walking with me !!!',\n offsetX: -15,\n target: '#demoSmart',\n animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n });\n tooltip.appendTo('#targetContainer');\n let ele: HTMLElement = document.getElementById('demoSmart');\n let drag: Draggable = new Draggable(ele, {\n clone: false,\n dragArea: '#targetContainer',\n drag: (args: any) => {\n if (args.element.getAttribute('data-tooltip-id') === null) {\n tooltip.open(args.element);\n } else {\n tooltip.refresh(args.element);\n }\n },\n dragStart: (args: any) => {\n if (args.element.getAttribute('data-tooltip-id') !== null) { return; }\n tooltip.open(args.element);\n },\n dragStop: (args: any) => {\n tooltip.close();\n }\n });\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<style type=\"text/css\">\n #demoSmart {\n width: 100px;\n height: 100px;\n background-image: url('http://npmci.syncfusion.com/production/demos/src/tooltip/images/smartposition.png');\n background-size: 100px 100px;\n position: absolute;\n left: calc( 50% - 50px);\n top: calc( 50% - 50px);\n }\n\n #targetContainer {\n padding-left: 0;\n padding-right: 0;\n height: 100%;\n width: 100%;\n }\n</style>\n<div id=\"targetContainer\" class=\"col-lg-12 control-section\">\n <div id=\"demoSmart\">\n </div>\n</div>\n\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
	`1`	+{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Tooltip } from '@syncfusion/ej2-popups';\nimport { Draggable } from '@syncfusion/ej2-base';\n/*\n tooltip sample\n /\n\n\n let tooltip: Tooltip = new Tooltip({\n content: 'Drag me anywhere, to start walking with me !!!',\n offsetX: -15,\n target: '#demoSmart',\n animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n });\n tooltip.appendTo('#targetContainer');\n let ele: HTMLElement = document.getElementById('demoSmart');\n let drag: Draggable = new Draggable(ele, {\n clone: false,\n dragArea: '#targetContainer',\n drag: (args: any) => {\n if (args.element.getAttribute('data-tooltip-id') === null) {\n tooltip.open(args.element);\n } else {\n tooltip.refresh(args.element);\n }\n },\n dragStart: (args: any) => {\n if (args.element.getAttribute('data-tooltip-id') !== null) { return; }\n tooltip.open(args.element);\n },\n dragStop: (args: any) => {\n tooltip.close();\n }\n });\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<style type=\"text/css\">\n #demoSmart {\n width: 100px;\n height: 100px;\n background-image: url('http://npmci.syncfusion.com/production/demos/src/tooltip/images/smartposition.png');\n background-size: 100px 100px;\n position: absolute;\n left: calc( 50% - 50px);\n top: calc( 50% - 50px);\n }\n\n #targetContainer {\n min-height: 350px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n float: left;\n position: relative;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n</style>\n<div id=\"targetContainer\" class=\"col-lg-12 control-section\">\n <div id=\"demoSmart\">\n </div>\n</div>\n\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf\": \"syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}