Javascript 如何在选择列表上创建Opentip工具提示？

给定此HTML（代码段）：

但这并不是：

new Opentip($('idsch_all'), 'Extract all data?', 'Extract', {style: 'myStyle'});

最后一个错误来自opentip-prototype.js：

if (this.triggerElement.length > 1) {
  throw new Error("You can't call Opentip on multiple elements.");
}

我猜问题在于元素的长度取决于选项的数量，因为我可以为每个选项指定一个唯一的ID，然后为每个选项创建一个Opentip（尽管存在定位错误，我可能通过指定不同的目标来修复）

---

我正在使用opentip-prototype.js v2.4.6（opentip.org）

作为10个选项的入门，如果您想为每个选项添加不同的工具提示，可以添加类似IE和chrome的内容：

  <select multiple="multiple"  size="3">
            <option value="A" data-ot="AAA"> Hello</option>
            <option  value="B" data-ot="BBB">GoodBye</option>
            <option  value="C">GoodByeC</option>
            <option  value="D">GoodByeD</option>
            <option  value="E">GoodByeE</option>
            <option  value="F" data-ot="FFF">GoodByeF</option>
   </select>

 $(document).ready(
           function (event) {
               var select1 = $('SELECT option');
           if (select1.length == 0) return;
           select1 = select1[0];
           var optionToolTip = new Opentip($(select1), '', '', {});
           $('select').mousemove(function (e) {
                   var mouseY = e.offsetY;
                   //var o = document.elementFromPoint(e.PageX, e.pageY);
                   var selectHeight = this.scrollHeight;
                   var optionHeight = selectHeight / this.options.length;
                   var Y2 = mouseY + this.scrollTop;
                   var optionIndex = Math.floor(Y2 / optionHeight);
                   if (optionIndex < 0 || optionIndex >= this.options.length) {
                       optionToolTip.prepareToHide();
                       return;
                   }
                   var optionHovered = this.options[optionIndex];
                   //return new Opentip(this, content, title, options);    
                   var content = optionToolTip.adapter.data(optionHovered, "ot");
                   if ((content == null)||(content == ''))
                       optionToolTip.prepareToHide();
                   else
                   {
                       optionToolTip.setContent(content);
                       optionToolTip.prepareToShow();
                   }                   

               });

               $('select').mouseout(function (e) {
                   optionToolTip.prepareToHide();
               });
           });

你好
再见
再见
告别
再见
再见
$（文件）。准备好了吗(
功能（事件）{
var select1=$（“选择选项”）；
如果（选择1.length==0）返回；
select1=select1[0]；
var optiontoltip=newopentip（$（select1），“”，，{}）；
$（'select'）.mousemove（函数（e）{
var mouseY=e.offsetY；
//var o=document.elementFromPoint（e.PageX，e.pageY）；
var selectHeight=this.scrollHeight；
var optionHeight=selectHeight/this.options.length；
var Y2=mouseY+this.scrollTop；
var optionIndex=数学楼层（Y2/期权高度）；
if（optionIndex<0 | | optionIndex>=this.options.length）{
optionToolTip.prepareToHide（）；
返回；
}
var optionHovered=this.options[optionIndex]；
//返回新的Opentip（此、内容、标题、选项）；
var content=optionoltip.adapter.data（optionHovered，“ot”）；
如果（（内容==null）| |（内容==''）
optionToolTip.prepareToHide（）；
其他的
{
optionoltip.setContent（内容）；
optionoltip.prepareToShow（）；
}                   
});
$（'select'）.mouseout（函数（e）{
optionToolTip.prepareToHide（）；
});
});

我找到了一个解决方法：将选择列表括在一个范围内，并使用以下ID：。。。如果有人能给我提供一个“正确”的答案，我将不胜感激。谢谢Ian，但正如我在OP中所说的，我可以通过每个选项都有一个唯一的ID来分配给每个选项-我正在寻找一种简单的方法在选择控件上放置工具提示，而我使用span的解决方法感觉“错了”。

if (this.triggerElement.length > 1) {
  throw new Error("You can't call Opentip on multiple elements.");
}

  <select multiple="multiple"  size="3">
            <option value="A" data-ot="AAA"> Hello</option>
            <option  value="B" data-ot="BBB">GoodBye</option>
            <option  value="C">GoodByeC</option>
            <option  value="D">GoodByeD</option>
            <option  value="E">GoodByeE</option>
            <option  value="F" data-ot="FFF">GoodByeF</option>
   </select>

 $(document).ready(
           function (event) {
               var select1 = $('SELECT option');
           if (select1.length == 0) return;
           select1 = select1[0];
           var optionToolTip = new Opentip($(select1), '', '', {});
           $('select').mousemove(function (e) {
                   var mouseY = e.offsetY;
                   //var o = document.elementFromPoint(e.PageX, e.pageY);
                   var selectHeight = this.scrollHeight;
                   var optionHeight = selectHeight / this.options.length;
                   var Y2 = mouseY + this.scrollTop;
                   var optionIndex = Math.floor(Y2 / optionHeight);
                   if (optionIndex < 0 || optionIndex >= this.options.length) {
                       optionToolTip.prepareToHide();
                       return;
                   }
                   var optionHovered = this.options[optionIndex];
                   //return new Opentip(this, content, title, options);    
                   var content = optionToolTip.adapter.data(optionHovered, "ot");
                   if ((content == null)||(content == ''))
                       optionToolTip.prepareToHide();
                   else
                   {
                       optionToolTip.setContent(content);
                       optionToolTip.prepareToShow();
                   }                   

               });

               $('select').mouseout(function (e) {
                   optionToolTip.prepareToHide();
               });
           });