1

(編集)現在の動作は、ホバー時に表示されるツールチップではありません。デフォルトのhtmlタイトルまたはjqueryツールチップ(/ edit)ではありません

ウェブページにカレンダーがあります。1日にイベントがあり、その日にカーソルを合わせると、コンマで区切られたイベント名を含むhtmlタイトル属性が表示されます。これは、1日に20のイベントがあると見苦しくなり始めるので、jQueryを使用してこの表示を変えたいと思います。ツールチップを表示するためのコードは次のとおりです(ページ上の他のjQueryスクリプト間の競合を理解していないため、jQueryに$を使用すると問題が発生し、すべて入力するとうまくいくようです):

jQuery(function(){
        var tip = jQuery("#tip");

        //on hover of links with a class of "eventful"
        jQuery(".eventful a").hover(function(e){

            //pull the title attribute into variable "tip"
            tip.text(jQuery(this).attr("title"));

            //make the default title blank
            jQuery(this).attr("title", "");

            //place the new title with css
            tip.css("top",(e.pageY+5)+"px")
                .css("left",(e.pageX+5)+"px")
                .fadeIn("slow");

        }, function() {
                //on mouse out remove
                jQuery("#tip").fadeOut("fast");

                //replace the default title
                jQuery(this).attr("title", tip.html());
        });
    });

それはうまくいかないので、そこで何が間違っているのかわかりません。ただし、ツールチップを表示した後、複数のカンマ区切りのイベントの表示方法を変更する必要があります。できれば、順序付けされていないリストに変更する必要があります。アイテムを配列に分割する場合としない場合があり、各コンマで文字列を分割するこのスニペットを以下に示します。

var titleArray = $( "。eventful")。attr( "title")。split( "、");

それがうまくいくなら、私はそれをどのように組み込んで、それをulに入れるのかわかりません。これについて助けてくれてありがとう!

4

1 に答える 1

0

tip divにはposition:absoluteスタイルが必要であり、そのz-indexはページ内の他の要素よりも大きい必要があります。追加jQuery("#tip").css('z-index',somehighvalue)

于 2011-04-08T17:39:28.187 に答える