问题描述
||
在我们的工作区中,有一个使用YUI库创建的上下文菜单。当用户将鼠标悬停在每个项目上时,我们希望触发工具提示。我在Google周围搜索,但找不到有用的信息。我们怎样才能做到这一点?
这是上下文菜单的创建方式:
// Add ContextMenu instance to the DataTable parent container
var contextMenu = new YAHOO.widget.ContextMenu(\"contextMenu\",{trigger: viewScriptsDataTable.getTbodyEl(),itemData: contextMenuItems,lazyload: true});
contextMenu.render(\"viewScriptsGrid\");
// Subscribe to events in format event,function,object to pass to function
contextMenu.beforeShowEvent.subscribe(CodesGrid.updateSelectionIfNecessary,viewScriptsDataTable);
contextMenu.subscribe(\"click\",CodesGrid.onContextMenuClick,viewScriptsDataTable);
解决方法
您可以将文本包裹在一个跨度中并设置title属性
var contextMenuItems = [
{text:\"<span title\'Cut\'>Cut <em class=\'helptext\'>Ctrl + X</em></span>\"},{text:\"<span title\'Copy\'>Copy <em class=\'helptext\'>Ctrl + C</em></span>\"},{text:\"<span title\'Paste\'>Paste <em class=\'helptext\'>Ctrl + V</em></span>\"}
];
或者,您可以从现有的html构建菜单,以便设置title属性:
<div id=\"editmenu\" class=\"yuimenu\">
<div class=\"bd\">
<ul class=\"first-of-type\">
<li class=\"yuimenuitem\">
<a class=\"yuimenuitemlabel\" href=\"#\" title=\"Cut\">
Cut <em class=\"helptext\">Ctrl + X</em>
</a>
</li>
<li class=\"yuimenuitem\">
<a class=\"yuimenuitemlabel\" href=\"#\" title=\"Copy\">
Copy <em class=\"helptext\">Ctrl + C</em>
</a>
</li>
<li class=\"yuimenuitem\">
<a class=\"yuimenuitemlabel\" href=\"#\" title=\"Paste\">
Paste <em class=\"helptext\">Ctrl + V</em>
</a>
</li>
</ul>
</div>
</div>