0

jquery のjqueryTOOLSプラグインを使用して、サイトの一連のフォーム フィールドのツールチップを生成しています。

イベント トリガーは、小さな JavaScript によって決定されます。

$(function() {
$("#myform :input[title],label[title]").tooltip({
position: "top center",
offset: [-10, 0],
effect: "fade",
opacity: 1.0
      });
    });

ご覧のとおり、これは s と s の title 属性をツールチップ onFocus としてトリガーします。

また、ツールチップの構成がこの JavaScript の一部として行われ、位置が設定され、オフセットなどが設定されていることもわかります。

私の問題：

フォーム内のフィールドに対して、ツールチップが占めることができる適切な位置は 1 つではありません。左に表示する必要がある要素、右に表示する要素、上に表示する要素があります。要素のクラスに基づいて、要素の代替位置を指示する方法を探しています。

私が試してみました：

ヒントを左に表示する必要がある要素のクラスを次のように設定します。

<input  
        title="This text becomes the tooltip" 
        class="errorleft" 
        type="radio" 
        name="somename" 
        value="value" 
        id="elementID"  
                />

次に、JavaScriptを調整して追加のトリガーを含めます：

$(function() {
$("#myform :input[title],label[title]").tooltip({
position: "top center",
offset: [-10, 0],
effect: "fade",
opacity: 1.0
      });
    });

    $(function() {
$("#myform.errorleft :input[title],label[title]").tooltip({
position: "center left",
offset: [0, 0],
effect: "fade",
opacity: 1.0
      });
    });

これは機能しません（理由はわかります）。これを行う方法があることは知っていますが、その方法がわかりません.jqt Webサイトで見つけることができるドキュメントのどれもこれについて議論していません.

どんなアイデアでも大歓迎です

jsFiddle
ここでは、デモ フォームを使用した私の状況の jsfiddle と、私が試みたコードを示します。この例では、Email フィールドのクラスは「errorleft」ですが、他のすべてのフィールドはクラスレスです。すべてのツールチップが右側に表示されます http://jsfiddle.net/DjHr7/1/

4

1 に答える 1

1

セレクターにスペースがありません。現在書かれているように、

$("#myform.errorleft :input[title],label[title]")

つまり、IDが#myformでクラスが.errorleftの要素を見つけます。次の構文で動作するはずです。

$("#myform .errorleft")

つまり、 IDが#myformの要素内でクラス.errorleftの要素を検索します。

:input[title],label[title]（各入力フィールドにクラスを指定すれば、追加について心配する必要はありません。

于 2012-11-20T01:50:20.450 に答える