鉴于此HTML(代码段):

<input type="text" name="sch_alert" value="[email protected]" size="40"
maxlength="45" onchange="return valString(this.form.sch_alert, 0, 45, 'Invalid entry
for this field')" title="" id="idsch_alert"
placeholder="Your email address"><input type="text" name="sch_sms" value="44788xxxxxxx"
size="20" maxlength="14" title="" id="idsch_sms" placeholder="Your mobile number"><br>
<label class="companyform" for="idsch_all">All Campaigns?</label>
<select name="sch_all"  title="Select Yes to extract/alert for replies on all
campaigns, otherwise select No and select specific campaigns below." id="idsch_all">
<option value="Y">Yes</option>
<option value="N">No</option>
</select>


以下javascript作品:

new Opentip($('idsch_alert'), 'Email to receive reply data alert', 'Alert email', {style: 'myStyle'});
new Opentip($('idsch_sms'), 'Mobile phone number', 'Alert mobile', {style: 'myStyle'});


但这不是:

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

10-02 16:46