☰

HTML - 省略記号が有効な場合にのみツールチップを表示するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript html css tooltip ellipsis
HTML - 省略記号が有効な場合にのみツールチップを表示するにはどうすればいいですか? 質問する

私のページには、スタイル付きの動的なデータを含むスパンがありますellipsis。

.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

この要素に同じ内容のツールチップを追加したいのですが、内容が長くて省略記号が画面に表示される場合にのみ表示されるようにしたいです。

何か方法はありますか?がアクティブになる
と、ブラウザーはイベントをスローしますかellipsis?

*ブラウザ: Internet Explorer

ベストアンサー1

title以下は、組み込みの省略記号設定を使用してこれを実行し、 Martin Smith のコメントに基づいてオンデマンドで (jQuery を使用して) 属性を追加する方法です。

$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

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

おすすめ記事