0
Chromeでうまく動作する次のコード(JSBin)があります。テキスト上にマウスカーソルを置くと、JQueryのツールチップでフルテキストが表示されます。Safariでホバーの全文表示を無効にする
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="mightOverflow" style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<a href="https://www.google.com">very very very very very very very very very very very long</a>
</div>
<script>
$(function() {
$(document).tooltip();
});
$(document).on('mouseenter', '.mightOverflow', function() {
var $t = $(this);
var title = $t.attr('title');
if (!title) {
if (this.offsetWidth < this.scrollWidth)
$t.attr('title', $t.text())
} else {
if (this.offsetWidth >= this.scrollWidth && title == $t.text())
$t.removeAttr('title')
}
});
</script>
</body>
</html>
しかし、それはChromeで同じように動作しません:だけでなく、それはjQueryのツールチップホバーテキストを表示するだけでなく、ホバー上のデフォルト(小さい)のフルテキスト。
Safariでこのデフォルトホバー効果をどのように無効にできるか知っている人はいますか?
動作しません。そして、実際には、私は実際のリンクで動作する必要があります。 OPを変更します。 – SoftTimur