2017-05-18 10 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> 

그러나, 크롬에서 동일한 방식으로 작동하지 않습니다뿐만 아니라 그것은 JQuery와 툴팁 호버 텍스트를 표시뿐만 아니라, 호버의 기본 (작은) 전문.

Safari에서이 기본 호버 효과를 해제하는 방법을 알고있는 사람이 있습니까?

답변

0
pointer-events: none; 

트릭을 수행 할 수도 있지만 실제 링크 인 경우 JS를 통해 요청을 처리해야합니다.

+0

작동하지 않습니다. 실제로 실제로 링크가 필요합니다. 나는 OP를 수정할 것이다. – SoftTimur