12

ユーザーが特定のリンクや要素の上にカーソルを置いたときに、Web ブラウザーのデフォルトのツールチップ表示を抑制したいと考えています。それが可能であることは知っていますが、方法がわかりません。誰でも助けることができますか？

これは、マイクロフォーマットされた日時のツールチップを抑制するためです。BBC は hCalendar のサポートを中止しました。これは、機械可読日付の表示が、認知障害のあるユーザーや一部のスクリーン リーダー ユーザーにとってアクセシビリティの問題であったためです。http://www.bbc.co.uk/blogs/bbcinternet/2008/07/why_the_bbc_removed_microforma.html

編集：

Aronの提案と同じ行に沿ってjqueryプラグインを作成しました...

// uFsuppress plugin v1.0 - toggle microformatted dates
(function($){
$.ufsuppress = function() {
    $(".dtstart,.dtend,.bday").hover(function(){
        $(this).attr("ufdata",$(this).attr("title"));
        $(this).removeAttr("title");
    },function(){
        $(this).attr("title",$(this).attr("ufdata"));
        $(this).removeAttr("ufdata");
    });
}
})(jQuery);

// Usage
$.ufsuppress();
4

8 に答える 8

23

私の知る限り、タイトルタグの表示を実際に抑制することはできません。

ただし、いくつかの回避策があります。

リンクと要素の title プロパティを保持したい場合、Javascript を使用して title プロパティを削除し、onmouseover()で再度設定することができますonmouseout()。

// Suppress tooltip display for links that have the classname 'suppress'
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    if (links[i].className == 'suppress') {
        links[i]._title = links[i].title;
        links[i].onmouseover = function() { 
            this.title = '';
        }
        links[i].onmouseout = function() { 
            this.title = this._title;
        }
    }
}
于 2009-01-19T11:57:01.870 に答える
9

この要素を html に追加します 

    onmouseover="title='';"

たとえば、隠し変数を保存するasp.netチェックボックスがありますが、ユーザーにツールチップとして表示したくありません。

于 2012-06-13T04:10:20.503 に答える
7

jQuery プラグイン timeagoを使用しているときに、このスレッドに遭遇しました。実際には、ソリューションは CSS プロパティを使用して非常に簡単pointer-eventsです。検索エンジンを介してここに来る人々の利益のためにこれを投稿します:)

.suppress {
    pointer-events:none;
}

クリックして何かに移動する必要があるリンクなどには、これを使用しないでください。この場合、承認された JS ソリューションを使用します。

于 2013-08-07T13:49:50.887 に答える
4

プロトタイプのこのようなものは、「dtstart」のクラスを持つ日時マイクロフォーマットのすべてのタイトル属性を空白にします:

$$('abbr.dtstart').each(function(abbr){abbr.title=' '})

空白を使用したことに注意してください。Mozilla のドキュメントのelement.titleには、

バグ 264001によると、タイトルを空の文字列に設定すると、デフォルトの継承動作がトリガーされます。継承を取り消すには、タイトルを空でない空白文字列に設定する必要があります。

于 2009-01-19T11:57:11.857 に答える
3

titleこれは問題の解決にはなりませんが、それでも興味深いかもしれません:データの保存に使用できる別のユニバーサル属性があります - lang!

保存したいデータを連続した文字列に変換し、プレフィックスを付けて'x-'、RFC 1766 に従ってプライベート使用を宣言するだけです。

コメントの中で、sanchothefat 氏は、microformats の abbr-design-pattern を使用してユーザビリティの問題を解決したいと考えていることを明らかにしました。しかし、このパターンよりも意味的に意味のある (または、私の意見ではそれ以上の) 他のパターンがあります。私がすること：

<p>
 The party is at
  <dfn class="micro-date">10 o'clock on the 10th
   <var>20051010T10:10:10-010</var></dfn>.
</p>

これらのスタイルとともに

dfn.micro-date {
    font-weight: inherit;
    font-style: inherit;
}
dfn.micro-date var {
    display: none;
}

私の意見では、意味的に最も正しい方法はdl定義リストを使用することです。これは段落内では許可されていません。これは、次のパターンで回避できます。

<p>
 The party is at <q cite="#micro-dates">10 o'clock on the 10th</q>.
</p>

<dl id="micro-dates">
 <dt>10 o'clock on the 10th</dt>
 <dd>20051010T10:10:10-010</dd>
</dl>

より洗練されたスタイルシートが必要です:

q[cite='#micro-dates']:before {
    content: '';
}
q[cite='#micro-dates']:after {
    content: '';
}
dl#micro-dates {
    display: none;
}
于 2009-01-19T12:48:28.913 に答える
3

これが私がしたことです。

$('.fancybox').hover(
    function(){
        $(this).attr('alt',$(this).attr('title'));
        $(this).attr('title','');
    },
    function(){
        $(this).attr('title',$(this).attr('alt'));
        $(this).removeAttr('alt');
    }
).click(function(){
    $(this).attr('title',$(this).attr('alt'));
    $(this).removeAttr('alt');
});
于 2011-09-01T07:37:14.297 に答える
0

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

$(selector).on( 'mouseenter', function(){
    return false;
});
于 2013-11-06T21:37:48.827 に答える
-2

でこの動作を抑制することができますjQuery

var tempTitle;
$('[title]').hover(
  function(e) {
    debugger;
    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);
  }
);
.progress3 {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
.progress3:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(data-tooltip);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}
.progress3:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div title='abc' data-tooltip="This is some information for our tooltip." class="progress3">
  title='abc' will not be displayed
</div>

フィドル

于 2016-09-27T12:49:53.083 に答える