2017-05-18 6 views
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でこのデフォルトホバー効果をどのように無効にできるか知っている人はいますか?

答えて

0

実際のリンクであれば、JS経由でリクエストを処理する必要があります。

+0

動作しません。そして、実際には、私は実際のリンクで動作する必要があります。 OPを変更します。 – SoftTimur

関連する問題