web-dev-qa-db-ja.com

jQueryを使用してネイティブツールチップを非表示にする

ユーザーがタイトル属性を持つアンカータグにカーソルを合わせたときにネイティブツールチップアクションを非表示にする方法はありますか？削除したくないので、デフォルトのツールチップアクションである厄介な黄色のボックスを表示しないでください。

更新：

他のいくつかの投稿を読んだ後、ネイティブツールチップアクションのtitle属性を非表示にできないと思いますが、ここではボックスの外側で考えようとしています。アンカータグ内でtitle属性の代わりに別の属性を使用しても、有効なページを維持できますか？

タイトル属性値を削除することは、誰かがonclickイベントに追加する方法を見つけられない限り、選択肢ではありませんか？

以下の作業コード

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

$('a').click( function() {
    var $this = $(this);
    var title = $this.data('title');
    ... do your other stuff...
});
jquerytooltip
18
Phill Pafford

どうやら、title属性は通常のイベントハンドラに該当しません。とにかく、私の元の答えはうまくいきませんでしたが、うまくいくかどうかを確認するために、引き続きプレイします。タイトル属性を保持する必要があるが、コメントに示されているようにポップアップ効果を望まない場合は、要素のデータにタイトル属性を格納し、そこから使用します。

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

$('a').click( function() {
    var $this = $(this);
    var title = $this.data('title');
    ... do your other stuff...
});

元の答え：

タイトルを持つすべての要素に、デフォルトのアクションを妨げる特定のホバーオーバーハンドラーを指定します。

$('[title]').hover(
   function(e) {
       e.preventDefault();
   },
   function() { }
);

テスト後は動作しないようです。

24
tvanfosson

次の方法で削除できます。

$("a").removeAttr("title");

これにより、jsユーザーのみが削除されるため、検索エンジンから引き続きアクセスおよび検索できます。

4
Fabian Buch

BEj ni c bEjのコードのバリエーションを使用しました。ホバー時にタイトルコンテンツを保持する必要がありましたが、それでもデフォルトの動作を抑制する必要があったからです。

// Suppress default tooltip behavior on hover
var tempTitle = "";
$('abbr[title],dfn[title],span.info-tip[title],').hover(
function(e){
    e.preventDefault();
    tempTitle = $(this).attr('title');

    $(this).attr('title', '');
        // add attribute 'tipTitle' & populate on hover
        $(this).hover(
            function(){
                $(this).attr('tipTitle', tempTitle);
            }
        );
    },
   // restore title on mouseout
   function() {
   $(this).attr('title', tempTitle);
   }
);

これにより、スタイルシートでこれを行うことができます：/* abbr & tooltip styles: first, the immediate descendants of the content area are set to highlight abbreviations on hover, but avoiding lists; as we don't want *all* abbreviations highlighted when you hover on a root list */

abbr,
abbr[tipTitle],
dfn,
dfn[tipTitle],
span.info-tip,
span.info-tip[tipTitle] {
border-bottom:none; /*remove border 1st, then let following rules add it back in*/
}

p:hover abbr[tipTitle],
li:hover abbr[tipTitle],
dl>*:hover abbr[tipTitle],
label:hover abbr[tipTitle],
p:hover dfn[tipTitle],
li:hover dfn[tipTitle],
dl>*:hover dfn[tipTitle],
label:hover dfn[tipTitle],
p:hover span.info-tip[tipTitle],
li:hover span.info-tip[tipTitle],
dl>*:hover span.info-tip[tipTitle],
label:hover span.info-tip[tipTitle]
{
position: relative;
text-decoration: none;
border-bottom: 1px dotted #333;
cursor: help;
}

p:hover abbr[tipTitle]:before,
li:hover abbr[tipTitle]:before,
dl>*:hover abbr[tipTitle]:before,
label:hover abbr[tipTitle]:before,
p:hover dfn[tipTitle]:before,
li:hover dfn[tipTitle]:before,
dl>*:hover dfn[tipTitle]:before,
label:hover dfn[tipTitle]:before,
p:hover span.info-tip[tipTitle]:before,
li:hover span.info-tip[tipTitle]:before,
dl>*:hover span.info-tip[tipTitle]:before,
label:hover span.info-tip[tipTitle]:before {
content: "";
position: absolute;
border-top: 20px solid #803808;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
visibility: hidden;
top: -18px;
left: -26px;
}

p:hover abbr[tipTitle]:after,
li:hover abbr[tipTitle]:after,
dl>*:hover abbr[tipTitle]:after,
label:hover abbr[tipTitle]:after,
p:hover dfn[tipTitle]:after,
li:hover dfn[tipTitle]:after,
dl>*:hover dfn[tipTitle]:after,
label:hover dfn[tipTitle]:after,
p:hover span.info-tip[tipTitle]:after,
li:hover span.info-tip[tipTitle]:after,
dl>*:hover span.info-tip[tipTitle]:after,
label:hover span.info-tip[tipTitle]:after {
content: attr(tipTitle);
position: absolute;
color: white;
top: -35px;
left: -26px;
background: #803808;
padding: 5px 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
white-space: nowrap;
visibility: hidden;
}

p:hover abbr[tipTitle]:hover:before,
li:hover abbr[tipTitle]:hover:before,
dl>*:hover abbr[tipTitle]:hover:before,
label:hover abbr[tipTitle]:hover:before,
p:hover dfn[tipTitle]:hover:before,
li:hover dfn[tipTitle]:hover:before,
dl>*:hover dfn[tipTitle]:hover:before,
label:hover dfn[tipTitle]:hover:before,
p:hover span.info-tip[tipTitle]:hover:before,
li:hover span.info-tip[tipTitle]:hover:before,
dl>*:hover span.info-tip[tipTitle]:hover:before,
label:hover span.info-tip[tipTitle]:hover:before,
p:hover abbr[tipTitle]:hover:after,
li:hover abbr[tipTitle]:hover:after,
dl>*:hover abbr[tipTitle]:hover:after,
label:hover abbr[tipTitle]:hover:after,
p:hover dfn[tipTitle]:hover:after,
li:hover dfn[tipTitle]:hover:after,
dl>*:hover dfn[tipTitle]:hover:after,
label:hover dfn[tipTitle]:hover:after,
p:hover span.info-tip[tipTitle]:hover:after,
li:hover span.info-tip[tipTitle]:hover:after,
dl>*:hover span.info-tip[tipTitle]:hover:after,
label:hover span.info-tip[tipTitle]:hover:after {
visibility: visible;
transition: visibility 0s linear .3s;
-moz-transition: visibility 0s linear .3s;
}

デフォルトのツールチップが同時に表示されることなく、必要な場所にかなりのツールチップを提供します。

4
Chris

元の投稿者は、.tooltip（）のネイティブアクションを無効にすることだけを望んでいました。その場合は、次の簡単な解決策を使用してください。

$(function() {
    $( document ).tooltip({
        items: "[data-tooltip]",
        content: function() {
            var element = $( this );
            if ( element.is( "[data-tooltip]" ) ) {
                return element.attr('data-tooltip');
            }
        }
    });
});

[title]属性が無効になり、ツールチップは、要素に[data-tooltip]属性がある場合にのみトリガーされます。さらに「アイテム」を定義することで、さまざまな動作とスタイルを作成できます。

$(function() {
    $( document ).tooltip({
        items: "[data-tooltip],img[alt]",
        content: function() {
            var element = $( this );
            if ( element.is( "[data-tooltip]" ) ) {
                return element.attr('data-tooltip');
            }
            if ( element.is( "[alt]" ) ) {
                return element.attr('alt') + something_else;
            }
        }
    });
});

http://jqueryui.com/tooltip/#custom-content ＆ http://api.jqueryui.com/tooltip/#option-items

2
IT-Smart

タイトルからそれを取得するには、data（）メソッドを使用します。

$(document).ready( function () {
    $('.items_with_title').each( function () {
        $(this).data('title', $(this).attr('title') );
        $(this).removeAttr('title');
    });
});

// to access it
$(document).ready( function () {
    $('A').click( function () {
        alert($(this).data('title'));
    });
});

また、title属性を持つ任意のアイテムのセレクターを作成することもできます。

$('*[title]').each(...
2
MacAnthony
var tempTitle = "";
$('a[title]').hover(
    function(e){
         e.preventDefault();
         tempTitle = $(this).attr('title');

         $(this).attr('title', '');

             $(this).mousedown(
                function(){
                    $(this).attr('title', tempTitle);
                }
            );
    }
   ,
   function() {
       $(this).attr('title', tempTitle);
   }
);

犬のように機能してみてください。

1
bEj ni c bEj

'mouseenter'イベントをフックしてfalseを返すと、ネイティブツールチップが表示されなくなります。

$(selector).on( 'mouseenter', function(){ return false; });

1
nevf

そのような作品：

デフォルトのタイトル属性の代わりにsTitleに名前を変更し、JQueryから呼び出す必要がある場合：

getAttribute（ 'stitle'）

それはすべてで動作します。

1
Ali El Menini

私はこれがJqueryに関する投稿であることを知っていますが、私はこの問題に遭遇し、ほとんどがライトボックスに接続されているので、誰かがそれを必要とする場合、画像リンク上のiaian7 Mediabox AdvancedのMootools修正があります修正はこれらのいずれでも機能します http://line25.com/articles/rounding-up-the-top-10-mootools-lightbox-scripts

if ($$('.lbThumb').length > 0) { //  lbThumb a class or what ever you are using
    $$('.lbThumb').each(function (el) { // same here , your a class

        var savedtitle = el.get('title');
        var getimage  = el.getElement('img'); 
                    // must use image click since Mediabox will kill our a element click
        getimage.addEvent('click', function () {
            el.set('title',savedtitle );
        });
        // hide nasty a tooltip 
        el.addEvents({
        mouseenter: function () {
          el.erase('title');
        },
        // bring it back 
        mouseleave: function () {
          el.set('title',savedtitle );

        }
      });

   });
}
1
Benn
var title;
$('a[title]').hover(function () {
   title = $(this).attr('title');
   $(this).attr('title','');
}, function () {
   $(this).attr('title',title);
});
1
Morteza QorbanAlizade