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

내장 생략 부호 설정을 사용하고 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>

2. 임의의 "툴팁"을 표시하십시오 .

.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");
      }
    }
  });
};

이것이 내가 한 일입니다. 대부분의 툴팁 스크립트에서는 툴팁을 저장하는 기능을 실행해야합니다. 이것은 jQuery 예입니다.

$.when($('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
})).done(function(){ 
   setupTooltip();
});

줄임표 CSS를 확인하지 않으려면 다음과 같이 단순화하십시오.

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
})).done(function(){ 
   setupTooltip();
});

나는 "때"를 가지고 있기 때문에 모든 타이틀이 업데이트 될 때까지 "setupTooltip"기능이 실행되지 않습니다. "setupTooltip"을 툴팁 기능으로 바꾸고 *를 확인하려는 요소로 바꾸십시오. * 당신이 그것을 떠나면 모두를 통과합니다.

브라우저 툴팁으로 제목 속성 만 업데이트하려는 경우 다음과 같이 단순화 할 수 있습니다.

$('*').filter(function() {
   return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
   if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
      $(this).attr('title', $(this).text());
   }
});

또는 줄임표를 확인하지 않고 :

$.when($('*').filter(function() {
   return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
   $(this).attr('title', $(this).text());
});

자바 스크립트 만 사용 하여이 작업을 수행하려면 다음을 수행하십시오. span에 id 속성을 제공하고 (DOM에서 쉽게 검색 할 수 있도록) 모든 컨텐츠를 'content'라는 속성에 배치하십시오.

<span id='myDataId' style='text-overflow: ellipsis; overflow : hidden;
 white-space: nowrap; width: 71;' content='{$myData}'>${myData}</span>

그런 다음 자바 스크립트에서 요소가 DOM에 삽입 된 후 다음을 수행 할 수 있습니다.

var elemInnerText, elemContent;
elemInnerText = document.getElementById("myDataId").innerText;
elemContent = document.getElementById("myDataId").getAttribute('content')
if(elemInnerText.length <= elemContent.length)
{
   document.getElementById("myDataId").setAttribute('title', elemContent); 
}

물론 자바 스크립트를 사용하여 스팬을 DOM에 삽입하는 경우 내용을 삽입하기 전에 변수에 유지할 수 있습니다. 이 방법으로 범위에 컨텐츠 속성이 필요하지 않습니다.

jQuery를 사용하려는 경우 이것보다 더 우아한 솔루션이 있습니다.

줄임표를 넣을 위치를 결정하는 CSS 클래스가 있습니다. 이를 기반으로 다음을 수행합니다 (요소 집합이 다를 수 있음, 줄임표가 사용되는 곳은 물론 별도의 클래스 선택기가 될 수 있음).

$(document).on('mouseover', 'input, td, th', function() {
    if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
        $(this).attr('title', $(this).val());
    }
});

다음은 바닐라 JavaScript 솔루션입니다.

(function init() {

  var cells = document.getElementsByClassName("cell");

  for(let index = 0; index < cells.length; ++index) {
    let cell = cells.item(index);
    cell.addEventListener('mouseenter', setTitleIfNecessary, false);
  }

  function setTitleIfNecessary() {
    if(this.offsetWidth < this.scrollWidth) {
      this.setAttribute('title', this.innerHTML);
    }
  }

})();

.cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px;
  border-style: solid;
  width: 120px; 
}

<div class="cell">hello world!</div>
<div class="cell">hello mars! kind regards, world</div>

이것은 내 해결책 이었으므로 매력으로 작동합니다!

    $(document).on('mouseover', 'input, span', function() {
      var needEllipsis = $(this).css('text-overflow') && (this.offsetWidth < this.scrollWidth);
      var hasNotTitleAttr = typeof $(this).attr('title') === 'undefined';
      if (needEllipsis === true) {
          if(hasNotTitleAttr === true){
            $(this).attr('title', $(this).val());
          }
      }
      if(needEllipsis === false && hasNotTitleAttr == false){
        $(this).removeAttr('title');
      }
  });

위의 해결책 중 어느 것도 나를 위해 효과가 없었지만 훌륭한 해결책을 찾았습니다. 사람들이 가장 큰 실수는 페이지로드시 요소에 3 개의 CSS 속성이 모두 선언되어 있다는 것입니다. 타원을 원하는 범위가 부모보다 넓은 경우에만 해당 스타일 + 툴팁을 동적으로 추가해야합니다.

    $('table').each(function(){
        var content = $(this).find('span').text();
        var span = $(this).find('span');
        var td = $(this).find('td');
        var styles = {
            'text-overflow':'ellipsis',
            'white-space':'nowrap',
            'overflow':'hidden',
            'display':'block',
            'width': 'auto'
        };
        if (span.width() > td.width()){
            span.css(styles)
                .tooltip({
                trigger: 'hover',
                html: true,
                title: content,
                placement: 'bottom'
            });
        }
    });

스팬을 다른 스팬으로 둘러 쌀 수 있으며 원래 / 내부 스팬의 너비가 새 / 외부 스팬의 너비보다 큰지 테스트하면됩니다. 내가 말할 수 있음에 유의하십시오-대략 span내부에있는 상황 에 따라 td다르므로 실제로 span내부 와 작동하는지 알 수 없습니다 span.

여기 내 자신과 비슷한 위치에있는 다른 사람들을위한 내 코드가 있습니다. Angular 컨텍스트에 있어도 수정하지 않고 복사 / 붙여 넣기하고 있지만 가독성과 필수 개념을 손상 시키지는 않습니다. 여러 곳에서 적용해야했기 때문에 서비스 방법으로 코딩했습니다. 내가 전달한 선택기는 여러 인스턴스와 일치하는 클래스 선택기입니다.

CaseService.applyTooltip = function(selector) {
    angular.element(selector).on('mouseenter', function(){
        var td = $(this)
        var span = td.find('span');

        if (!span.attr('tooltip-computed')) {
            //compute just once
            span.attr('tooltip-computed','1');

            if (span.width() > td.width()){
                span.attr('data-toggle','tooltip');
                span.attr('data-placement','right');
                span.attr('title', span.html());
            }
        }
    });
}