web-dev-qa-db-ja.com

jQueryを使用してブラウザーのツールチップを無効にする方法は？

属性「title」が設定されている要素にカーソルを合わせるとブラウザのツールチップが表示されないようにする方法はありますか？タイトルのコンテンツは削除したくないことに注意してください。リクエストされたコードは次のとおりです。

  $(document).ready(function() {
     $('a.clickableSticky').cluetip({
         splitTitle: '|',
         showTitle: false,
         titleAttribute: 'description',
         activation: 'click',
         sticky: true,
         arrows: true,
         closePosition: 'title'
     });
 });

そしてasp.netで

  <ItemTemplate>
     <a class="clickableSticky" href="#"
     title=' <%#((Limit)Container.DataItem).Tip %>'>
     <img src="..\App_Themes\default\images\icons\information.png"/>
     </a>

 </ItemTemplate>
javascriptjqueryjquery-plugins
19
epitka

ページの読み込み時にtitle属性を削除できます。

_$(document).ready(function() {
    $('[title]').removeAttr('title');
});
_

後でタイトルを使用する必要がある場合は、要素のjQuery data()に保存できます。

_$(document).ready(function() {
    $('[title]').each(function() {
        $this = $(this);
        $.data(this, 'title', $this.attr('title'));
        $this.removeAttr('title');
    });
});
_

もう1つのオプションは、title属性の名前をaTitle、またはブラウザーが無視する何かに変更し、JavaScriptを更新してtitle。

更新：

使用できる面白いアイデアは、要素の上にホバーするときにタイトルを「ゆっくり」削除することです。ユーザーが要素にカーソルを合わせると、タイトルの値を元に戻すことができます。

IEでは、title属性をnullに設定したり、title属性を削除したりすると、ホバーイベントのツールチップが正しく削除されないため、これは簡単ではありません。ただし、ホバー時にツールチップを空の文字列（_""_）に設定すると、Internet Explorerを含むすべてのブラウザーからツールチップが削除されます。

上記のメソッドを使用して、title属性をjQueryのdata(...)メソッドに格納し、mouseoutに戻すことができます。

_$(document).ready(function() {
    $('[title]').mouseover(function () {
        $this = $(this);
        $this.data('title', $this.attr('title'));
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
    }).mouseout(function () {
        $this = $(this);
        $this.attr('title', $this.data('title'));
    });
});
_
52
Dan Herbert

これがmodern jQueryで行う方法です（IMO）...

$('[title]').attr('title', function(i, title) {
    $(this).data('title', title).removeAttr('title');
});

...そしてもちろん、title属性を読み戻すには...

$('#whatever').data('title');
8
alex

上記のDan Herbertの提案に従って、以下にコードを示します。

$(element).hover(
    function () {
        $(this).data('title', $(this).attr('title'));
        $(this).removeAttr('title');
    },
    function () {
        $(this).attr('title', $(this).data('title'));
    });
7
Barka

JQueryを使用して、タイトル属性の内容を削除したり、後で使用できるように他のパラメーターに移動したりできます。

ただし、これは一部のアクセシビリティを失うことを意味します。

RE：ClueTip Googleを検索すると、これが一般的な問題であることが示唆されているようです。これはIEでのみ発生しますか？ ClueTipはFireFoxで期待どおりに動作するようです。

3
Mike Houston
function hideTips(event) {  
    var saveAlt = $(this).attr('alt');
    var saveTitle = $(this).attr('title');
    if (event.type == 'mouseenter') {
        $(this).attr('title','');
        $(this).attr('alt','');
    } else {
        if (event.type == 'mouseleave'){
            $(this).attr('alt',saveAlt);
            $(this).attr('title',saveTitle);
        }
   }
}

$(document).ready(function(){
 $("a").live("hover", hideTips);
});

こんにちは、みんな。私はこのソリューションを使用しており、すべてのブラウザで正常に動作します。

3
Oleh Zastavnyi

名前を変更したタイトル属性を使用するには、ClueTipをハックアップします。

1
Detect

別のアクション（画面のコピーや色の選択など）中にこの機能を使用できるようにする必要があるため、私のソリューションには、そのアクションの開始時と終了時に呼び出される2つの関数が含まれています。

$.removeTitles = function() {
    $('[title]').bind('mousemove.hideTooltips', function () {
    $this = $(this);
    if($this.attr('title') && $this.attr('title') != '') { 
        $this.data('title', $this.attr('title')).attr('title', '');
    }
  }).bind('mouseout.hideTooltips', function () {
    $this = $(this);
    $this.attr('title', $this.data('title'));
  });
}

$.restoreTitles = function() {
    $('[title]').unbind('mousemove.hideTooltips').unbind('mouseout.hideTooltips');
    $('*[data-title!=undefined]').attr('title', $this.data('title'));
}

他の要素がタイトル付き要素の上に（タイトル付きdivの画像として）配置でき、内部要素（画像！）の上にマウスを置くとすぐにmouseOutが発生するため、MouseEnterは使用できません。

ただし、mouseMoveを使用する場合は、イベントが複数回発生するため、注意が必要です。保存したデータが消去されないようにするには、まずタイトルが空でないことを確認してください！

RemoveTitlesの最後の行は、mouseClickまたはショートカットキーで終了を呼び出したときに、マウスが終了しなかった要素からタイトルを復元しようとします。

0
horiatu