在Dojo Select中添加工具提示

我想向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」。設置腳本和模塊的正確方法是什麼，以便我可以顯示工具提示？

來源

2015-01-14 kenbuja

您試圖通過標籤字符串在元素上設置內聯onmouseover事件處理程序。這將試圖調用全局函數，並且不存在這樣的函數 - 您的函數被包含在您的需求工廠函數中。

鑑於您正在創建一個包含指示要顯示文本的屬性的節點的HTML標籤，在這種特定情況下，更好的選擇是使用dojo/on的event delegation爲鼠標懸停和另一個事件處理程序對於鼠標移開：

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，但是這樣做可能是你從哪裏到達目的地的最短路徑。

來源

2015-01-15 03:03:05

最初，我在商店模塊中設置了這樣的項目：'{id：「foo」，label：「FOO」，tip：「Foo Tooltip」}'並嘗試使用Tooltip，如示例中所示@Eric使用，但我無法弄清楚使用正確的CSS選擇器。 – kenbuja

在Dojo Select中添加工具提示

回答

相關問題