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

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

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

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

 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);
}

函数仪表下拉编辑器（容器、选项）{
var instrItems=[{
“期权说明”：“期权22/11/2013 C70股权”
}, {
“期权清单”：“期权26/11/2013 C55股权”
},
{
“期权登记”：“期权30/11/2013 C80股权”
}
];
变量输入=$（''）；
输入。附加到（容器）；
input.kendoDropDownList({
dataTextField:“optionInstr”，
dataValueField:“optionInstr”，
dataSource:instrItems，//将其绑定到brands数组
选项标签：“选择一种乐器”
}).附在（容器）上；
}

在我的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>

---

我现在没有时间装配JSFIDLE，但我非常确定这会起作用

使用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
属性，如果这更容易的话。但是，tooltip小部件在显示后不会刷新其内容，这就是为什么在更改内容后需要手动调用
tooltipWidget.refresh（）
。
您可以通过jquery鼠标悬停事件实现所需的功能。我对工具提示知之甚少，但我认为必须在开始之前定义，所以您可能必须伪造它并显示样式覆盖或类似有用的jquery文档。我会考虑这个解决办法，谢谢。我会试试看，让你知道。非常感谢你的代码。我想知道我应该在Html页面上做什么。例如，我是否设置了一个div？测试如果您从JS初始化工具提示，那么HTML中所需的只是要将其附加到的元素。它不需要
标题
属性，因为
内容
是在选项中指定的，因此它不会检查属性。当然，如果需要，可以使用
title
属性，而不是我在示例中使用的
myTooltip
变量。只需更新属性值而不是变量。我如何在这个注释部分很好地发布代码示例？您的帖子非常有用-谢谢。一旦我在下拉列表中选择一个项目，我就能够填充的“文本”属性。现在，我的挑战是使用kendoTooltip（）小部件对文本进行良好的格式化。目前，我的下拉文本值仅显示在屏幕上，我在屏幕上放置了…非常无聊：-）
var onSelect = function (e) {
    myTooltip = ...;
    tooltipWidget.refresh();
};

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