Question

在我们的工作区中，有一个使用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);

Answer 1

您可以将文本换行并设置标题属性

  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>

如何在鼠标指针悬停在YUI上下文菜单项上时显示工具提示

1 个答案: