0

qTip プラグインを使用して、alt タグと title タグの両方のツールチップを作成しています。これを行う理由は、私が取り組んでいるアプリケーションでは、画像のすべての alt タグをタイトル タグに変換できないため、両方を使用する必要があったためです。

例えば

$('*[title]').qtip({
        content: {
            attr: 'title'
        },
        hide: {
            fixed: false,
            event: 'click mouseleave'
        },
        position: {
            target: "mouse",
            adjust: {
                x: 20,
                y: 10,
                method: "flipinvert flipinvert"
            },
            container: false,
            viewport: true,
            at: "right center",
            my: "left center"
        },
        style: {
            classes: "ui-tooltip-tipsy",
            tip: {
                corner: false
            }
        }
    });

    $('img[alt]').qtip({
        content: {
            attr: 'alt'
        },
        hide: {
            fixed: false,
            event: 'click mouseleave'
        },
        position: {
            target: "mouse",
            adjust: {
                x: 20,
                y: 10,
                method: "flipinvert flipinvert"
            },
            container: false,
            viewport: true,
            at: "right center",
            my: "left center"
        },
        style: {
            classes: "ui-tooltip-tipsy",
            tip: {
                corner: false
            }
        }
    });

私が抱えている問題は、画像をラップするタイトルのリンクがある場合、間違った動作である 2 つのツールチップが表示されることです。

私の考えは、ホバリングしている要素にタイトルタグまたは代替タグがある場合、両方ではなくどちらか一方のみを実行するというロジックチェックを行うことです。

たとえば<a href="#" title="Tooltip info"><img src="#" alt="Tooltip info"></a>、この場合は alt または title タグのいずれかを使用する必要があります。

誰でも助けることができますか？ありがとう

例：

$('a').hover(function() {

if($(this).attr('title')) {
// dont run the alt tag tooltip code
}
});
4

2 に答える 2

3

最初のセレクターには次のセレクターを使用できます

$('*[title]:not(:has([alt]))').qtip({.....

それが行うことは、title属性を持つ子要素を持たない属性を持つすべての要素を選択することaltです。

于 2012-06-29T10:37:47.677 に答える
1

これを試して：

$('*[title]:not(:has([alt]))').qtip({
  // code
});

タグ has をフィルタリングし、title子の has を除外しますalt。

于 2012-06-29T10:31:30.687 に答える