Ako vytvoriť tooltip s podporou elementov HTML

V rámci vývoja webového podnikové riešenia som sa dostal do situácie, kedy zákazník chcel aplikovať tooltip s podporou elementov jazyka HTML. Jednou z možností by bolo aplikovanie widgetu dijit/Tooltip. No toto riešenie by v súčasnom štádiu projektu bolo časovo náročné aplikovať, a tak som začal rozmýšľať nad niečím rýchlym a jednoducho aplikovateľným. Pôvodné riešenie tooltipu cez atribút title žiaľ v tomto prípade nebolo možné použiť no jeho podstata zostala zachovaná.

V rámci vývoja tooltipu som musel vyriešiť viaceré problémy, medzi ktoré patrila maximálna šírka tooltipu a jeho prispôsobovanie obsahu, unifikované umiestnenie, podpora elementov jazyka HTML či univerzálnosť a jednoduché použitie. Pre umiestnenie tooltipu som pôvodne chcel použiť jedno z nasledujúcich riešení.

Príklad: Riešenie č.1.

1
2
var posX = e.clientX;
var posY = e.clientY;
var posX = e.clientX;
var posY = e.clientY;

Príklad: Riešenie č.2.

1
2
var posX = e.pageX
var posY = e.pageY 
var posX = e.pageX
var posY = e.pageY 

Príklad: Riešenie č.3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getCoords(node) {
 
    var coords = {
        x: node.offsetLeft,
        y: node.offsetTop
    };
    while (node.offsetParent) {
 
        coords.x = coords.x + node.offsetParent.offsetLeft;
        coords.y = coords.y + node.offsetParent.offsetTop;
        if (node == document.getElementsByTagName("body")[0]) {
            break;
        }
        else {
            node = node.offsetParent;
        }
    }
    return coords;
}
function getCoords(node) {

    var coords = {
        x: node.offsetLeft,
        y: node.offsetTop
    };
    while (node.offsetParent) {

        coords.x = coords.x + node.offsetParent.offsetLeft;
        coords.y = coords.y + node.offsetParent.offsetTop;
        if (node == document.getElementsByTagName("body")[0]) {
            break;
        }
        else {
            node = node.offsetParent;
        }
    }
    return coords;
}

Žiaľ ani jedno riešenie nespĺňalo požadované kritéria. Výsledkom bolo často nepredvídateľné umiestnenie tooltipu ako aj nepresné identifikovanie pozície kurzora pri kombinácii viacerých vrstiev cez vlastnosť display.

Pre vývoj tooltipu bolo dôležité definovať aj jeho rozmer. Aj tu nastal problém s kombináciou vrstiev a definovaním šírky tooltipu. Nakoniec sa navrhol riešenie pre maximálnu šírku 300px s podporou jednoriadkového aj viacriadkového tooltipu. Tooltip sa aktivuje atribútom data-tooltip. Keďže projekt je tvorený vo frameworku Dojo Toolkit, z tohto dôvodu aj prezentovaný návrh riešenia používa framework Dojo Toolkit.

Príklad: Zápis do elementu <style>.

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
.relative {
    position : relative;
}
 
.absolute {
    position : absolute;
}
 
.width-300 {
    width : 300px;
}
 
.no-wrap {
    white-space: nowrap;
}
 
.wrap-normal {
    white-space: normal;
}
 
#globalTooltip {    
    font-weight : normal;            
    border : 1px solid #ddd;
    background-color: #fafafa;
    padding : 2px 6px;
    font-size : 12px;
    color : black;
    z-index : 100;
}
.relative {
    position : relative;
}

.absolute {
    position : absolute;
}

.width-300 {
    width : 300px;
}

.no-wrap {
    white-space: nowrap;
}

.wrap-normal {
    white-space: normal;
}

#globalTooltip {    
    font-weight : normal;            
    border : 1px solid #ddd;
    background-color: #fafafa;
    padding : 2px 6px;
    font-size : 12px;
    color : black;
    z-index : 100;
}

Príklad: Zápis do elementu <body>.

1
2
<h1 data-tooltip="Test 1">Tooltip 1</h1>
<div data-tooltip="<i>Test 2</i>">Tooltip 2</div>
<h1 data-tooltip="Test 1">Tooltip 1</h1>
<div data-tooltip="<i>Test 2</i>">Tooltip 2</div>

Príklad: Zápis do elementu <script>.

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
// Author : Matej Lednár (http://how-to.mldgroup.com)
 
require(["dojo/ready", "dojo/_base/array", "dojo/dom-construct",
    "dojo/on", "dojo/query", "dojo/dom", "dojo/_base/lang",
    "dojo/dom-attr", "dojo/dom-class", "dojo/dom-style",
    "dojo/dom-geometry",
    "dojo/parser"], function(ready, array, domConstruct, on, query, 
     dom, lang, domAttr, domClass, domStyle, domGeom) {
    ready(function() {
 
        tooltipTimer = null;
 
        array.forEach(query("[data-tooltip]"), function(node, index) {
 
            on(node, "mouseover", displayTooltip);
            on(node, "mouseout", hideTooltip);
            domAttr.set(node, "data-tooltip-registered", "true");
        });
 
        // global tooltip
 
        function displayTooltip(e) {
 
            function display(e) {
 
                var node = e.target;
                var tooltipValue = domAttr.get(node, "data-tooltip");
 
                // tooltip must contain at least 1 character
 
                if (tooltipValue.length > 0) {
 
                    domClass.add(node, "relative");
 
                    var tooltipTemplate = "<div id='globalTooltip'
                    class='absolute no-wrap'></div>";
 
                    domConstruct.place(tooltipTemplate, node, "first");
 
                    var tooltip = dom.byId("globalTooltip");
                    tooltip.innerHTML = tooltipValue;
 
                    var coords = domGeom.getContentBox(node);
 
                    domStyle.set(tooltip, {
                        left: 40 + "px",
                        top: +(coords.h + 6) + "px"
                    });
 
                    tooltip.innerHTML = tooltipValue;
 
                    // tooltip can be displayed as one line text 
                    // or multiline text
                    // maximal width for one line is 300px
                    if (domStyle.get(tooltip, "width") > 300) {
 
                        domClass.remove(tooltip, "no-wrap");
                        domClass.add(tooltip, "width-300");
                        domClass.add(tooltip, "wrap-normal");
                    }
                }
            }
 
            tooltipTimer = setTimeout(lang.partial(display, e), 500);
        }
 
        function hideTooltip(e) {
            clearTimeout(tooltipTimer);
            var node = e.target;
            domClass.remove(node, "relative");
            domConstruct.destroy("globalTooltip");
        }
 
    });
});
// Author : Matej Lednár (http://how-to.mldgroup.com)

require(["dojo/ready", "dojo/_base/array", "dojo/dom-construct",
    "dojo/on", "dojo/query", "dojo/dom", "dojo/_base/lang",
    "dojo/dom-attr", "dojo/dom-class", "dojo/dom-style",
    "dojo/dom-geometry",
    "dojo/parser"], function(ready, array, domConstruct, on, query, 
     dom, lang, domAttr, domClass, domStyle, domGeom) {
    ready(function() {

        tooltipTimer = null;

        array.forEach(query("[data-tooltip]"), function(node, index) {

            on(node, "mouseover", displayTooltip);
            on(node, "mouseout", hideTooltip);
            domAttr.set(node, "data-tooltip-registered", "true");
        });

        // global tooltip

        function displayTooltip(e) {

            function display(e) {

                var node = e.target;
                var tooltipValue = domAttr.get(node, "data-tooltip");

                // tooltip must contain at least 1 character

                if (tooltipValue.length > 0) {

                    domClass.add(node, "relative");

                    var tooltipTemplate = "<div id='globalTooltip'
                    class='absolute no-wrap'></div>";

                    domConstruct.place(tooltipTemplate, node, "first");

                    var tooltip = dom.byId("globalTooltip");
                    tooltip.innerHTML = tooltipValue;

                    var coords = domGeom.getContentBox(node);

                    domStyle.set(tooltip, {
                        left: 40 + "px",
                        top: +(coords.h + 6) + "px"
                    });

                    tooltip.innerHTML = tooltipValue;

                    // tooltip can be displayed as one line text 
                    // or multiline text
                    // maximal width for one line is 300px
                    if (domStyle.get(tooltip, "width") > 300) {

                        domClass.remove(tooltip, "no-wrap");
                        domClass.add(tooltip, "width-300");
                        domClass.add(tooltip, "wrap-normal");
                    }
                }
            }

            tooltipTimer = setTimeout(lang.partial(display, e), 500);
        }

        function hideTooltip(e) {
            clearTimeout(tooltipTimer);
            var node = e.target;
            domClass.remove(node, "relative");
            domConstruct.destroy("globalTooltip");
        }

    });
});

Tooltip je založený na časovači, takže nie je zobrazený hneď, ale až po pol sekunde. To znamená, že ak je kurzor na položke, ktorá disponuje tooltipom kratšie ako pol sekundy, tooltip nebude zobrazený.

Záver

Verím, že moje riešenie tooltipu si nájde uplatnenie aj na iných projektoch. Demonštrované riešenie je vhodné transformovať do widgetu. V prípade, že máte dáke "zlepšováky" alebo efektívnejšie riešenie tooltipu, podeľte sa oň prostredníctvom komentára.

Ako vytvoriť tooltip s podporou elementov HTML

Záver

Komentáre

Pridať komentár