タイトル属性がツールチップを表示しないようにするにはどうすればよいですか？

Question

私はAngularとSemantic-UIを使ってWebアプリケーションを開発しています。 私はセマンティックUIのポップアップを使用して、ユーザーがいくつかの要素をホバーするときにスタイリッシュなツールチップを表示します。 とにかく、title属性を追加して、A11Y（WCAG 2.0）に準拠し、スクリーンリーダーにtitle属性のテキストコンテンツを読み取らせる必要があります。

このようにしてわかるように、いくつかの要素に対して2つのツールチップが表示されます。

title属性をテキストを保持し、ポップアップを表示しないようにする方法をご存知ですか？ 」とtitle属性を表示することです

私はjQueryので提供removeAttrメソッドを使用することはできませんので、テキストを削除したくない...

Answer 1

デフォルトのブラウザの動作を無効にする方法はありません、ブラウザのツールチップに表示されます。

あなたがそれもホバー上の空白にタイトルを設定し、マウスのうちにそれを交換するような単純なことができ、いくつかのjavascriptに頼る必要があります....

onmouseover="this.setAttribute('data-title', this.title);this.title = ''" 
onmouseout="this.setAttribute('title', this.getAttribute('data-title')" 

これが設定されますタイトルを空白にして（したがって、ツールチップを無効にする）、それをデータ属性に格納します。それからmouseoutでタイトルを元に戻します（意味論的なものはまだ機能します）。これをコードの正しい点に統合する必要があります。