HTML で省略記号効果のツールチップを動的にアクティブにする方法

HTML での省略記号効果の動的ツールチップのアクティブ化

問題ステートメント

HTML では、一般的に、次を使用して制限されたスペース内に長いテキストを表示します。省略記号スタイル。この手法では、3 つの点 (...) で示される余分なコンテンツが削除されます。ただし、省略記号がアクティブな場合は、追加情報を提供することが望ましいことがよくあります。ブラウザは本質的に、省略記号が適用されてもイベントをトリガーしません。

解決策

この問題に対処し、省略記号がアクティブになっている場合にのみツールヒントを表示するために、jQuery を利用する JavaScript ソリューションを次に示します。

<code class="javascript">$('.mightOverflow').bind('mouseenter', function() {
    var $this = $(this);

    if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
        $this.attr('title', $this.text());
    }
});

このコードを利用すると、ユーザーが「mightOverflow」クラスの DOM 要素の上にカーソルを置くと、スクリプトは要素の表示幅が実際の幅より小さいかどうかをチェックします。その場合、要素にまだ title 属性が設定されていない場合は、要素のテキストを title 属性に割り当て、必要に応じてツールヒントを効果的に提供します。

実装

これを実装するにはHTML ドキュメント内のソリューションを解決するには、 内に次のコード ブロックを追加するだけです。または セクション:

<code class="html"><script src="jquery.min.js"></script>
<script>
$('.mightOverflow').bind('mouseenter', function() {
    var $this = $(this);

    if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
        $this.attr('title', $this.text());
    }
});
</script></code>

このスクリプトを実行する前に、jQuery ライブラリ (jquery.min.js) がロードされていることを確認してください。次に、省略記号とツールヒントの機能が必要な HTML 要素にクラス「mightOverflow」を適用します。

このソリューションは、切り詰められたテキストにツールヒントを追加する動的かつ柔軟な方法を提供し、Web アプリケーションでのユーザー エクスペリエンスとアクセシビリティを向上させます。

以上がHTML で省略記号効果のツールチップを動的にアクティブにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。