如何基于下拉列表添加工具提示答案

【问题标题】：How to add a tooltip based on a DropDown list如何基于下拉列表添加工具提示
【发布时间】：2013-10-30 20:20:48
【问题描述】：

基本上我有一个 Kendo Grid，其中我的几个专栏也有 Kendo DropDowns。我想根据用户从“仪器”下拉列表中选择的值附加一个工具提示。

这是我的网格 javascript 代码（使用 MVVM 模式）：

      tradesGrid = $("#tradesGrid").kendoGrid({
        dataSource: datasource,
        toolbar: [
            { name: "create", text: "Add Trade" }
        ],
        columns: [{
            field: "TradeId"
        },
       {
            field: "Instrument",
            editor: instrumentsDropDownEditor, template: "#=Instrument#"
        },
         { command: ["edit", "destroy"] },
        ],
        sortable: true,
        editable: "popup",
    });

这里是仪器下拉菜单的编辑器功能：

 function instrumentsDropDownEditor(container, options) {

    var instrItems = [{     
        "optionInstr": "OPTION 22/11/2013 C70 Equity"
    }, {
        "optionInstr": "OPTION 26/11/2013 C55 Equity"
    },
     {
        "optionInstr": "OPTION 30/11/2013 C80 Equity"
     }
    ];

    var input = $('<input id="Instrument" name="Instrument">'); 
    input.appendTo(container);
    input.kendoDropDownList({
        dataTextField: "optionInstr",
        dataValueField: "optionInstr",
        dataSource: instrItems, // bind it to the brands array
        optionLabel: "Choose an instrument"
    }).appendTo(container);
}

在我的 Html 视图文件中，我从这个想法开始：

  <span class="key-button"
              title="Instrument Details!!!"
              data-role="tooltip"
              data-auto-hide="true"
              data-position="right"
              data-bind="events: { show: onShow, hide: onHide }"
  </span>

【问题讨论】：

您可能能够通过将 jquery 鼠标悬停在事件 api.jquery.com/mouseover 上来实现您正在寻找的东西。我对工具提示知之甚少，但我认为必须事先定义，因此您可能不得不伪造它并显示样式叠加或类似的东西
有用的 jquery 文档。我会考虑这个解决方案，谢谢。

标签： html asp.net-mvc-4 mvvm kendo-ui

【解决方案1】：

我现在没有时间安装 jsFiddle，但我很确定这会奏效...

在 javascript 中初始化您的工具提示，并指定作为函数的内容：

var myTooltip = "";

var tooltipWidget = $("#whatever").kendoTooltip({
  filter: "a",
  content: function (item) { return myTooltip; },
  ...
}).data("kendoTooltip");

然后在您的下拉小部件上，指定一个更改函数处理程序，将myTooltip 设置为您想要的任何内容。

var onSelect = function (e) {
    myTooltip = ...;
    tooltipWidget.refresh();
};

$("#dropdownlist").kendoDropDownList({
  select: onSelect,
  ...
});

或者您可以更改 HTML 元素上的 title 属性，如果这样更容易的话。但是，工具提示小部件显示后不会刷新其内容，这就是为什么您需要在更改内容后手动调用tooltipWidget.refresh()。

【讨论】：

我会试一试，让你知道。非常感谢该代码。
我想知道我应该在 Html 页面上做什么。例如，我是否设置了一个 div？
测试
如果你从 JS 初始化工具提示，那么你在 HTML 中所需要的就是你要附加它的元素。它不需要title 属性，因为在选项中指定了content，因此它不会检查该属性。当然，如果需要，您可以使用 title 属性，而不是我在示例中使用的 myTooltip 变量。只需更新属性值而不是变量。
我如何在此评论部分中很好地发布代码示例？
您的帖子非常有帮助 - 谢谢。在下拉列表中选择一个项目后，我就可以填充
的“文本”属性。我现在的挑战是使用 kendoTooltip() 小部件很好地格式化该文本。目前，我的下拉文本值仅显示在我放置
的屏幕上...很无聊:-)