Question

鉴于此HTML（代码段）：

<input type="text" name="sch_alert" value="foo@bar.co.uk" 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）

Answer 1

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

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

1 个答案: