0

~ http://cssglobe.com/lab/tooltip/01/にある jQuery ツールチップ スクリプトの非常にわずかに変更されたバージョンを使用しています-- 私が行った唯一の変更は、エリア リンクでツールチップを開始するように設定することです。通常のリンクに。上記のリンクのサンプルでは、​​IE ブラウザーに問題はありません。組み込みの IE ツールチップは表示されず、カスタム ツールチップのみが表示されます。しかし、私のページでは、カスタム ツールチップに加えて、IE の組み込みツールチップがまだ表示されています。何がこれを引き起こしているのでしょうか？

私が使用しているスクリプトは次のとおりです。

this.tooltipText = function () {
    /* CONFIG */
    xOffset = 0;
    yOffset = 0;
    /* END CONFIG */
    $("a.tooltipText, area.tooltipText").hover(function (e) {
        this.t = this.title;
        this.title = "";
        $("body").append("<p id='tooltipText'>" + this.t + "</p>");
        $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
    }, function () {
        this.title = this.t;
        $("#tooltipText").remove();
    });
    $("a.tooltipText, area.tooltipText").mousemove(function (e) {
        $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
};
// starting the script on page load
$(document).ready(function () {
    tooltipText();
});

ツールチップをトリガーする html のサンプルを次に示します。

<area shape="rect" coords="9,359,617,391" href="/link-here/" onclick="window.open(this.href,'','toolbar=no, location=no, addressbar=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=510, height=580, top=50, left=150'); return false;" target="_blank" class="tooltipText" title="<strong>First part bold</strong>  Rest of tooltip text goes here <strong>Read More...</strong>" />

ここで使用されているスクリプトとは別の方法で何をしているのかわかりません: http://cssglobe.com/lab/tooltip/01/

いつものように、どんな助けも大歓迎です!!

4

2 に答える 2

0

別のタグの属性内でのタグのネストは無効なhtmlであり、IEの問題の原因である可能性があります

タイトルの全文をtitle属性内に保持し、それを太字と通常に分離できるようにするには、「|」のような区切り文字を使用できます。ツールチップがスクリプトで作成されるときに、区切り文字でタイトルを分割します。

<img title="This will be bold | this is normal" src=""/>

変更されたコード

this.tooltipText = function () {
/* CONFIG */
xOffset = 0;
yOffset = 0;
/* END CONFIG */
$("a.tooltipText, area.tooltipText").hover(function (e) {
    this.t = this.title;
    this.title = "";

    /* split title at pipe delimiter*/
    this.title_parts= this.t.split('|');
    this.tip_content='<strong>'+this.title_parts[0]+'</strong>'+this.title_parts[1]; 

    $("body").append("<p id='tooltipText'><strong>" +/*change===> */ this.tip_content + "</p>");
    $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
}, function () {
    this.title = this.t;
    $("#tooltipText").remove();
});
$("a.tooltipText, area.tooltipText").mousemove(function (e) {
    $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
});

};

編集：以下は、ページの読み込み時にタイトルを完全に削除し、要素データに保存します

this.tooltipText = function () {
    /* CONFIG */
    xOffset = 0;
    yOffset = 0;
    /* END CONFIG */
    $("a.tooltipText, area.tooltipText").hover(function (e) {
        this.t = $(this).data('title');

        /* split title at pipe delimiter*/
        this.title_parts= this.t.split('|');
        this.tip_content='<strong>'+this.title_parts[0]+'</strong>'+this.title_parts[1]; 

        $("body").append("<p id='tooltipText'><strong>" +/*change===> */ this.tip_content + "</p>");
        $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
    }, function () {
        /*this.title = this.t;*/
        $("#tooltipText").remove();
    }).attr('title', function(index, title){
        $(this).data('title', title);
        return '';
    });
    $("a.tooltipText, area.tooltipText").mousemove(function (e) {
        $("#tooltipText").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
};
于 2012-06-20T18:08:24.597 に答える