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

นี่คือวิธีที่ใช้การตั้งค่าจุดไข่ปลาในตัวและเพิ่มการสร้างtitleแอตทริบิวต์แบบออนดีมานด์ (พร้อม jQuery) ตามความคิดเห็นของ Martin Smith:

$('.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ɐſ นั้นถูกต้อง แต่คุณอาจไม่ต้องการทำในเหตุการณ์ของ mouseenter นั่นจะเป็นสาเหตุให้ทำการคำนวณเพื่อตรวจสอบว่าจำเป็นหรือไม่ทุกครั้งที่คุณเลื่อนเมาส์ไปที่องค์ประกอบ ถ้าไม่มีการเปลี่ยนแปลงขนาดขององค์ประกอบก็ไม่มีเหตุผลที่จะทำเช่นนั้น

มันจะดีกว่าที่จะเรียกรหัสนี้ทันทีหลังจากองค์ประกอบถูกเพิ่มไปยัง 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 ชั่วคราวเป็น {'ล้น': 'มองเห็นได้', 'พื้นที่สีขาว': 'ปกติ', 'แบ่งคำ': 'หยุดพักทั้งหมด'}
3. ให้เบราว์เซอร์ทำการรีเลย์ หากการตัดคำเกิดขึ้นองค์ประกอบจะขยายความสูงของมันซึ่งหมายความว่าจุดไข่ปลาจำเป็นต้องมี
4. กู้คืนสไตล์ css

นี่คือการปรับปรุงของฉัน: http://jsfiddle.net/28r5D/6/

ฉันสร้างปลั๊กอิน jQuery ที่ใช้คำแนะนำเครื่องมือของ Bootstrap แทนคำแนะนำเครื่องมือในตัวของเบราว์เซอร์ โปรดทราบว่านี่ยังไม่ได้ทดสอบกับเบราว์เซอร์รุ่นเก่า

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" ด้วยฟังก์ชัน tooltip ของคุณและ * ด้วยองค์ประกอบที่คุณต้องการตรวจสอบ * จะผ่านพวกเขาทั้งหมดถ้าคุณปล่อยไว้

หากคุณต้องการเพียงแค่อัปเดตแอตทริบิวต์ชื่อเรื่องด้วยคำแนะนำเครื่องมือของเบราว์เซอร์คุณสามารถทำให้ง่ายขึ้นเช่น:

$('*').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());
});

หากคุณต้องการทำสิ่งนี้โดยใช้จาวาสคริปต์เท่านั้นฉันจะทำสิ่งต่อไปนี้ กำหนดคุณสมบัติ id ของ span (เพื่อให้สามารถดึงข้อมูลได้ง่ายจาก DOM) และวางเนื้อหาทั้งหมดในแอตทริบิวต์ชื่อ 'เนื้อหา':

<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());
    }
});

นี่คือโซลูชันของ Vanilla 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');
      }
  });

วิธีแก้ปัญหาด้านบนไม่ได้ผลสำหรับฉัน แต่ฉันหาวิธีแก้ปัญหาที่ยอดเยี่ยม ความผิดพลาดที่ใหญ่ที่สุดที่ผู้คนทำคือการมีคุณสมบัติ CSS ทั้งหมด 3 รายการที่ประกาศไว้บนองค์ประกอบเมื่อโหลดเจล คุณต้องเพิ่มสไตล์ + คำแนะนำเครื่องมือแบบไดนามิก IF และเฉพาะในช่วงที่คุณต้องการจุดไข่ปลาเปิดกว้างกว่าผู้ปกครอง

    $('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ภายในของ

นี่คือรหัสของฉันสำหรับคนอื่นที่อาจพบว่าตัวเองอยู่ในตำแหน่งที่คล้ายกับของฉัน ฉันกำลังคัดลอก / วางโดยไม่มีการดัดแปลงแม้ว่าจะอยู่ในบริบทเชิงมุมฉันไม่คิดว่าจะเบี่ยงเบนความสนใจจากการอ่านและแนวคิดที่สำคัญ ฉันเขียนมันเป็นวิธีการบริการเพราะฉันต้องการใช้มันมากกว่าหนึ่งแห่ง ตัวเลือกที่ฉันผ่านเข้ามาเป็นตัวเลือกชั้นเรียนที่จะจับคู่หลายอินสแตนซ์

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());
            }
        }
    });
}