ej2-javascript-samples/src/tooltip/template.js at master · jesusarockias/ej2-javascript-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/**
 * Tooltip template sample
 */

this.default = function () {

    //Initialize Toolbar component
    var toolbarObj = new ej.navigations.Toolbar({
        items: [
            {
                prefixIcon: 'e-cut-icon tb-icons', tooltipText: 'Cut'
            },
            {
                prefixIcon: 'e-copy-icon tb-icons', tooltipText: 'Copy'
            },
            {
                prefixIcon: 'e-paste-icon tb-icons', tooltipText: 'Paste'
            },
            {
                type: 'Separator'
            },
            {
                prefixIcon: 'e-bold-icon tb-icons', tooltipText: 'Bold'
            },
            {
                prefixIcon: 'e-underline-icon tb-icons', tooltipText: 'Underline'
            },
            {
                prefixIcon: 'e-italic-icon tb-icons', tooltipText: 'Italic'
            }
        ]
    });

    //Render initialized Toolbar component
    toolbarObj.appendTo('#Toolbar');

    //Initialize Tooltip component
    var tooltip = new ej.popups.Tooltip({

        //Set tooltip target
        target: '#Toolbar [title]',

        //Raise beforeRender event
        beforeRender: onBeforeRender,

        //Set true to show Tip pointer
        showTipPointer: false,

        //Set tooltip offsetX
        offsetX: 70,

        //Set tooltip width
        width: 170

    });

    //Render initialized Tooltip component
    tooltip.appendTo('#Tooltip');

};

/**
 * Tooltip content customization.
 */

function onBeforeRender(args) {
    var data = [
        { title: 'Bold', name: 'Bold (Ctrl+B)', description: 'Makes your text bold.' },
        { title: 'Underline', name: 'Underline (Ctrl+U)', description: 'Underline your text.' },
        { title: 'Italic', name: 'Italic (Ctrl+I)', description: 'Italicize your text.' },
        {
            title: 'Cut', name: 'Cut (Ctrl+X)',
            description: 'Remove the selection and put it on the Clipboard so you can paste it somewhere else.'
        },
        {
            title: 'Copy', name: 'Copy (Ctrl+C)',
            description: 'Put a copy of a selection on the Clipboard so you can paste it somewhere else.'
        },
        { title: 'Paste', name: 'Paste (Ctrl+V)', description: 'Add content on the Clipboard to your document.' }
    ];
    for (var i = 0; i < data.length; i++) {
        if (data[i].title === args.target.getAttribute('title')) {
            this.content = '<h6>' + data[i].name + '</h6><p>' + data[i].description + '</p>';
        }
    }
}