Javascript HTML - 如何仅在激活省略号时显示工具提示

Question

提问by Spiderman

I have got a span with dynamic data in my page, with ellipsisstyle.

我的页面中有一个带有动态数据的跨度，带有ellipsis样式。

.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

I'd like to add to this element tooltip with the same content, but I want it to appear only when the content is long and the ellipsis appear on screen.

Is there any way to do it?
Does the browser throw an event when ellipsisis activated?

我想添加具有相同内容的元素工具提示，但我希望它仅在内容很长且省略号出现在屏幕上时才出现。

有什么办法吗？
浏览器在ellipsis激活时是否抛出事件？

*Browser: Internet Explorer

*浏览器：Internet Explorer

Answer 1

回答by Jason Kleban

Here's a way that does it using the built-in ellipsis setting, and adds the titleattribute on-demand (with jQuery) building on Martin Smith's comment:

这是一种使用内置省略号设置的方法，并title根据 Martin Smith 的评论按需添加属性（使用 jQuery）：

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

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

Answer 2

回答by Sn?bj?rn

Here's a pure CSS solution. No need for jQuery. It won't show a tooltip, instead it'll just expand the content to its full length on mouseover.

这是一个纯 CSS 解决方案。不需要 jQuery。它不会显示工具提示，而是会在鼠标悬停时将内容扩展到其全长。

Works great if you have content that gets replaced. Then you don't have to run a jQuery function every time.

如果您的内容被替换，效果会很好。这样您就不必每次都运行 jQuery 函数。

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

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

Answer 3

回答by Elezar

uos??'s answer is fundamentally correct, but you probably don't want to do it in the mouseenter event. That's going to cause it to do the calculation to determine if it's needed, each time you mouse over the element. Unless the size of the element is changing, there's no reason to do that.

uos?? 的答案基本上是正确的，但您可能不想在 mouseenter 事件中这样做。每次将鼠标悬停在元素上时，这将导致它进行计算以确定是否需要它。除非元素的大小发生变化，否则没有理由这样做。

It would be better to just call this code immediately after the element is added to the DOM:

最好在将元素添加到 DOM 后立即调用此代码：

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

Or, if you don't know when exactly it's added, then call that code after the page is finished loading.

或者，如果您不知道它是何时添加的，则在页面加载完成后调用该代码。

if you have more than a single element that you need to do this with, then you can give them all the same class (such as "mightOverflow"), and use this code to update them all:

如果您需要使用多个元素来执行此操作，那么您可以为它们提供所有相同的类（例如“mightOverflow”），并使用此代码来更新它们：

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

Answer 4

回答by Tony Brix

Here is my jQuery plugin:

这是我的 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);

Usage:

用法：

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

Edit:

编辑：

I have made a gist for this plugin. https://gist.github.com/UziTech/d45102cdffb1039d4415

我已经为这个插件做了一个要点。 https://gist.github.com/UziTech/d45102cdffb1039d4415

Answer 5

回答by Hannes

Here are two other pure CSS solutions:

这是另外两个纯 CSS 解决方案：

Show the truncated text in place:

在原地显示截断的文本：

.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>

Show an arbitrary "tooltip":

显示任意的“工具提示”：

.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>

Answer 6

回答by Feng Dihai

We need to detect whether ellipsis is really applied, then to show a tooltip to reveal full text. It is not enough by only comparing "this.offsetWidth < this.scrollWidth" when the element nearly holding its content but only lacking one or two more pixels in width, especially for the text of full-width Chinese/Japanese/Korean characters.

我们需要检测是否真的应用了省略号，然后显示工具提示以显示全文。this.offsetWidth < this.scrollWidth当元素几乎包含其内容但宽度仅缺少一两个像素时，仅比较“ ”是不够的，特别是对于全角中文/日文/韩文字符的文本。

Here is an example: http://jsfiddle.net/28r5D/5/

这是一个例子：http: //jsfiddle.net/28r5D/5/

I found a way to improve ellipsis detection:

我找到了一种改进省略号检测的方法：

Compare "this.offsetWidth < this.scrollWidth" first, continue step #2 if failed.
Switch css style temporally to {'overflow': 'visible', 'white-space': 'normal', 'word-break': 'break-all'}.
Let browser do relayout. If word-wrap happening, the element will expands its height which also means ellipsis is required.
Restore css style.

首先比较“ this.offsetWidth < this.scrollWidth”，如果失败则继续步骤#2。
暂时将 css 样式切换为 {'overflow': 'visible', 'white-space': 'normal', 'word-break': 'break-all'}。
让浏览器重新布局。如果发生自动换行，元素将扩展其高度，这也意味着需要省略号。
恢复css样式。

Here is my improvement: http://jsfiddle.net/28r5D/6/

这是我的改进：http: //jsfiddle.net/28r5D/6/

Answer 7

回答by Steven

I created a jQuery plugin that uses Bootstrap's tooltip instead of the browser's build-in tooltip. Please note that this has not been tested with older browser.

我创建了一个 jQuery 插件，它使用 Bootstrap 的工具提示而不是浏览器的内置工具提示。请注意，这尚未在较旧的浏览器上进行测试。

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

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

Answer 8

回答by fanfavorite

This is what I did. Most tooltip scripts require you to execute a function that stores the tooltips. This is a jQuery example:

这就是我所做的。大多数工具提示脚本要求您执行一个存储工具提示的函数。这是一个 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();
});

If you didn't want to check for ellipsis css, you could simplify like:

如果您不想检查省略号 css，您可以简化如下：

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

I have the "when" around it, so that the "setupTooltip" function doesn't execute until all titles have been updated. Replace the "setupTooltip", with your tooltip function and the * with the elements you want to check. * will go through them all if you leave it.

我在它周围有“when”，因此“setupTooltip”函数在所有标题都更新之前不会执行。将“setupTooltip”替换为您的工具提示功能，将 * 替换为您要检查的元素。* 如果你离开它，它们会全部通过。

If you simply want to just update the title attributes with the browsers tooltip, you can simplify like:

如果您只想使用浏览器工具提示更新标题属性，您可以简化如下：

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

Or without check for ellipsis:

或者不检查省略号：

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

Answer 9

回答by Mark Costello

If you want to do this solely using javascript, I would do the following. Give the span an id attribute (so that it can easily be retrieved from the DOM) and place all the content in an attribute named 'content':

如果您想仅使用 javascript 执行此操作，我将执行以下操作。给 span 一个 id 属性（以便它可以很容易地从 DOM 中检索）并将所有内容放在一个名为“content”的属性中：

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

Then, in your javascript, you can do the following after the element has been inserted into the DOM.

然后，在您的 javascript 中，您可以在将元素插入 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); 
}

Of course, if you're using javascript to insert the span into the DOM, you could just keep the content in a variable before inserting it. This way you don't need a content attribute on the span.

当然，如果您使用 javascript 将 span 插入到 DOM 中，您可以在插入之前将内容保存在变量中。这样你就不需要跨度上的内容属性。

There are more elegant solutions than this if you want to use jQuery.

如果您想使用 jQuery，还有比这更优雅的解决方案。

Answer 10

回答by wuarmin

Here's a Vanilla JavaScript solution:

这是一个香草 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>

Javascript HTML - 如何仅在激活省略号时显示工具提示

提问by Spiderman

回答by Jason Kleban

回答by Sn?bj?rn

回答by Elezar

回答by Tony Brix

回答by Hannes

回答by Feng Dihai

回答by Steven

回答by fanfavorite

回答by Mark Costello

回答by wuarmin

相关推荐

最近更新

标签

Javascript HTML - 如何仅在激活省略号时显示工具提示

提问by Spiderman

回答by Jason Kleban

回答by Sn?bj?rn

回答by Elezar

回答by Tony Brix

回答by Hannes

回答by Feng Dihai

回答by Steven

回答by fanfavorite

回答by Mark Costello

回答by wuarmin

相关推荐

Javascript 未选中复选框时如何禁用提交按钮？

Javascript 更改表列顺序

Javascript 在 Angular 2 中如何检查 <ng-content> 是否为空？

javascript：在 switch case 中使用条件

相关推荐

最近更新

标签