0

リンクがあるテキストボックスを表示するためにqTip2を使用しています。マウスがこのリンクの上にあるときにツールチップを表示したい。

これを行う方法がわかりません。

まず、これは実行可能ですか？はいの場合はどうですか？

手伝ってくれてありがとう！

編集

Dihedralさん、情報ありがとうございます。私はあなたのアプローチに従いましたが、まだ機能していません。ページの html コードを確認したところ、jsFiddle コードで、2 番目のツールヒント ポップアップ用に (qTip によって) 追加の html が生成されていることがわかりました。しかし、私の場合、そのような追加のhtmlが見つかりません。

以下は私のコードで、これは jsFiddle リンクですhttp://jsfiddle.net/mddc/bacqe/6/

    $('#author').qtip({
    content: {
        text: $('#author-container').html()
    },
    show: {
  solo: false,
        event: 'mouseover'
    },      
    hide: {
        event: 'unfocus'
    },
    style: {
        tip: false,
        classes: 'author-content forcedzLowIndex'
    },      
    position: {
        my: 'top right',
        at: 'bottom right'
    },
    events: {
        render: function() {
            buildQtipInfoTooltip($('#author-allow-friends-link'), 'title', 'forcedzHighIndex');
        }
    }
}); 

function buildQtipInfoTooltip(jEle, attr_name, classes) {
    jEle.qtip({
        content: jEle.attr(attr_name),
        position: {
            at: 'bottom right',
            viewport: $(window),
            adjust: {
                y: 4,
                x: 0,
                method: 'shift'
            }
        },
        style: {
            classes: 'tooltip' + ' ' + classes,
            tip: false
        }
    }); 
}   

.forcedzLowIndex {
    z-index: 10000 !important;
}

.forcedzHighIndex {
    z-index: 99999 !important;
}
4

1 に答える 1

2

サンプルコードを使用するように私の答えを変更します:

あなたの最初のqTipは使用します

content: {
    text: $('#author-container').html()
},

コンテンツのために。この手法では、既存の要素を使用する代わりに #author-container 要素のクローンが作成されます。したがって、2 番目の qTip が適用されていましたが、画面に表示されなかった要素に適用されていました。

.html() を取り除いたところ、うまくいきました。これを試してください：http://jsfiddle.net/bacqe/13/

content: {
    text: $('#author-container')
},
于 2013-05-03T15:17:21.697 に答える