[javascript] HTML-줄임표가 활성화 된 경우에만 툴팁을 표시하는 방법

JAVASCRIPT / 글쓴이

내 페이지에 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

답변

내장 생략 부호 설정을 사용하고 titleMartin Smith의 주석에 온 디맨드 속성 (jQuery 포함)을 추가하는 방법은 다음과 같습니다 .

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

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

답변

다음은 순수한 CSS 솔루션입니다. jQuery가 필요 없습니다. 도구 설명이 표시되지 않고 마우스 오버시 내용을 전체 길이로 확장합니다.

교체되는 콘텐츠가있는 경우 효과적입니다. 그런 다음 매번 jQuery 함수를 실행할 필요가 없습니다.

.might-overflow {
    text-overflow: ellipsis;
    overflow : hidden;
    white-space: nowrap;
}

.might-overflow:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

답변

uosɐſ의 답변은 근본적으로 정확하지만 마우스 입력 이벤트에서는 원하지 않을 것입니다. 그러면 요소 위로 마우스를 올릴 때마다 필요한지를 결정하기 위해 계산을 수행하게됩니다. 요소의 크기가 변하지 않는 한 그렇게 할 이유가 없습니다.

요소가 DOM에 추가 된 직후 에이 코드를 호출하는 것이 좋습니다.

var $ele = $('#mightOverflow');
var ele = $ele.eq(0);
if (ele.offsetWidth < ele.scrollWidth)
    $ele.attr('title', $ele.text());

또는 정확히 언제 추가되는지 모르는 경우 페이지로드가 완료된 후 해당 코드를 호출하십시오.

이 작업을 수행해야하는 하나 이상의 요소가있는 경우 동일한 클래스 (예 : “mightOverflow”)를 제공하고이 코드를 사용하여 모든 요소를 ​​업데이트 할 수 있습니다.

$('.mightOverflow').each(function() {
    var $ele = $(this);
    if (this.offsetWidth < this.scrollWidth)
        $ele.attr('title', $ele.text());
});

답변

다른 두 가지 순수한 CSS 솔루션은 다음과 같습니다.

  1. 잘린 텍스트를 제자리에 표시하십시오.
.overflow {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow:hover {
  overflow: visible;
}

.overflow:hover span {
  position: relative;
  background-color: white;

  box-shadow: 0 0 4px 0 black;
  border-radius: 1px;
}
<div>
  <span class="overflow" style="float: left; width: 50px">
    <span>Long text that might overflow.</span>
  </span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.
</div>

스 니펫 확장
  1. 임의의 “툴팁”을 표시하십시오 .
.wrap {
  position: relative;
}

.overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  pointer-events:none;
}

.overflow:after {
  content:"";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 15px;
  z-index: 1;
  border: 1px solid red; /* for visualization only */
  pointer-events:initial;

}

.overflow:hover:after{
  cursor: pointer;
}

.tooltip {
  /* visibility: hidden; */
  display: none;
  position: absolute;
  top: 10;
  left: 0;
  background-color: #fff;
  padding: 10px;
  -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.5s ease;
}


.overflow:hover + .tooltip {
  /*visibility: visible; */
  display: initial;
  transition: opacity 0.5s ease;
  opacity: 1;
}
<div>
  <span class="wrap">
    <span class="overflow" style="float: left; width: 50px">Long text that might overflow</span>
    <span class='tooltip'>Long text that might overflow.</span>
  </span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.
</div>

스 니펫 확장

답변

내 jQuery 플러그인은 다음과 같습니다.

(function($) {
    'use strict';
    $.fn.tooltipOnOverflow = function() {
        $(this).on("mouseenter", function() {
            if (this.offsetWidth < this.scrollWidth) {
                $(this).attr('title', $(this).text());
            } else {
                $(this).removeAttr("title");
            }
        });
    };
})(jQuery);

용법:

$("td, th").tooltipOnOverflow();

편집하다:

이 플러그인에 대한 요점을 만들었습니다.
https://gist.github.com/UziTech/d45102cdffb1039d4415

답변

줄임표가 실제로 적용되는지 여부를 감지 한 다음 전체 텍스트를 표시하는 툴팁을 표시해야합니다. this.offsetWidth < this.scrollWidth요소가 내용을 거의 보유하고있을 때 ” “를 비교하는 것만으로는 충분하지 않으며 특히 너비가 한자 또는 두 개 이상인 픽셀, 특히 전각 한자 / 일본어 / 한국어 문자의 텍스트가 부족합니다.

예를 들면 다음과 같습니다. http://jsfiddle.net/28r5D/5/

줄임표 감지 기능을 향상시키는 방법을 찾았습니다.

  1. ” this.offsetWidth < this.scrollWidth“를 먼저 비교 하고 실패한 경우 2 단계를 계속 하십시오 .
  2. CSS 스타일을 일시적으로 { ‘overflow’: ‘visible’, ‘white-space’: ‘normal’, ‘word-break’: ‘break-all’}로 전환하십시오.
  3. 브라우저가 릴레이 아웃하도록하십시오. 줄 바꿈이 발생하면 요소의 높이가 확장되어 줄임표가 필요합니다.
  4. CSS 스타일을 복원하십시오.

내 개선 사항은 다음과 같습니다. http://jsfiddle.net/28r5D/6/

답변

브라우저의 내장 툴팁 대신 Bootstrap의 툴팁을 사용하는 jQuery 플러그인을 만들었습니다. 이전 브라우저에서는 테스트되지 않았습니다.

JSFiddle : https://jsfiddle.net/0bhsoavy/4/

$.fn.tooltipOnOverflow = function(options) {
    $(this).on("mouseenter", function() {
    if (this.offsetWidth < this.scrollWidth) {
        options = options || { placement: "auto"}
        options.title = $(this).text();
      $(this).tooltip(options);
      $(this).tooltip("show");
    } else {
      if ($(this).data("bs.tooltip")) {
        $tooltip.tooltip("hide");
        $tooltip.removeData("bs.tooltip");
      }
    }
  });
};