1

この 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) を使用しています

4

1 に答える 1

0

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();
               });
           });
于 2014-07-17T11:28:42.350 に答える