Добавление всплывающей подсказки в Dojo Select

Я хотел бы добавить всплывающую подсказку к элементам в Dojo Select. Этот код добавляет всплывающую подсказку, когда хранилище содержится в скрипте.

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
    @import "https://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css";
    @import "https://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css";
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js" type="text/javascript" data-dojo-config="async: true"></script>

    <script>
    require(["dijit/form/Select",
      "dojo/store/Memory",
      "dojo/domReady!"
    ], function (Select, Memory) {

        var store = new Memory({
        data: [
          { id: "foo", label: '<div tooltip="Foo Tooltip" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">FOO</div>' },
          { id: "bar", label: '<div tooltip="Bar Tooltip" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">Bar</div>' }
        ]
        });

        var s = new Select({
        store: store,
        labelType: 'html',
        labelAttr: 'label'
        }, "target");
        s.startup();
    });

    function showTooltip(el) {
        dijit.showTooltip(el.getAttribute('tooltip'), el);
    }

    function hideTooltip(el) {
        dijit.hideTooltip(el);
    }

    </script>
</head>

<body class="claro">
    <div id="target"></div>
</body>
</html>

Однако в моем приложении мой магазин находится в отдельном модуле (stores.js).

define([], function () {
    return {
        priority: [
            { id: "foo", label: '<div tooltip="Foo Tooltip" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">FOO</div>' },
            { id: "bar", label: '<div tooltip="Bar Tooltip" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">Bar</div>' }
        ]
     };
};

Я устанавливаю модуль в запросе («модули/магазины»), помещаю псевдоним в функцию (магазины) и создаю свой выбор, используя этот код.

new Select({
    id: "cboPriority",
    store: new Memory({ data: Stores.priority }),
    labelType: 'html',
    labelAttr: 'label'
}, "divPriority").startup();

Я пытался добавить функции showTooltip и hideTooltip в модуль, но все равно получаю сообщение об ошибке консоли «ReferenceError: showTooltip не определено». Как правильно настроить скрипт и модуль, чтобы я мог показать всплывающую подсказку?


javascript tooltip dojo dijit.form
person kenbuja    schedule 14.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы пытаетесь настроить встроенные обработчики событий onmouseover для элементов с помощью строк меток. Это будет попытка вызвать глобальную функцию showTooltip, а такой функции не существует - ваша функция showTooltip заключена в вашу требуемую фабричную функцию.

Учитывая, что вы создаете метку HTML с узлом, содержащим атрибут, указывающий отображаемый текст, лучшим вариантом в этом конкретном случае будет использование делегирование событий, чтобы подключить один обработчик событий для наведения курсора мыши и другой для выхода из него:

var dropdownNode = s.dropDown.domNode;
on(dropdownNode, '[data-tooltip]:mouseover', function () {
    Tooltip.show(this.getAttribute('data-tooltip'), this);
});
on(dropdownNode, '[data-tooltip]:mouseout', function () {
    Tooltip.hide(this);
});

(Tooltip в приведенном выше коде относится к модулю dijit/Tooltip, и я решил использовать атрибут данных, который, по крайней мере, был бы действительным HTML5.)

Честно говоря, я бы предпочел с самого начала избегать встраивания HTML в данные, но это, вероятно, кратчайший путь от того, где вы находитесь, к тому, где вы хотите быть.

person Ken Franqueiro    schedule 15.01.2015
comment
Первоначально у меня были элементы в модуле магазина, настроенные следующим образом: { id: "foo", label: "FOO", tip: "Foo Tooltip"}, и я попытался использовать всплывающую подсказку, как показано в примере, который использовал @Eric, но я не смог определить правильный селектор CSS для использования. - person kenbuja; 15.01.2015