एचटीएमएल - मैं केवल टूलटिप कैसे दिखा सकता हूं जब एलिप्सिस सक्रिय होता है

Question

मुझे अपने पृष्ठ में गतिशील डेटा के साथ 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है?

* ब्राउज़र: इंटरनेट एक्सप्लोरर

Comments

ध्यान रखें कि text-overflow:ellipsis;फ़ायरफ़ॉक्स में बिल्कुल भी काम नहीं करता है - इस सवाल को और देखें: stackoverflow.com/questions/4927257/…

— Spudley

मुझे बस कुछ ऐसा ही करना था। जांच की जा रही है कि क्या element.offsetWidth < element.scrollWidthके अनुसार इस जवाब काम करने के लिए अब तक लगता है।

— मार्टिन स्मिथ

दीर्घवृत्त का पता लगाने: stackoverflow.com/questions/7738117/…

— Adrien Be

पोस्टीरिटी के लिए ध्यान दें: text-overflow:ellipsis;अब फ़ायरफ़ॉक्स में काम करता है; इसे फ़ायरफ़ॉक्स 7 (सितंबर 2011 में रिलीज़) में जोड़ा गया था।

— sleske

Answer 1

यहां एक तरीका है जो इसे अंतर्निहित दीर्घवृत्त सेटिंग का उपयोग करता है, और titleमार्टिन स्मिथ की टिप्पणी पर विशेषता ऑन-डिमांड (jQuery के साथ) निर्माण को जोड़ता है :

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

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

Comments

धन्यवाद, एक आकर्षण की तरह काम करता है! हालाँकि यदि आप इसे और अधिक कुशल बनाना चाहते हैं, तो आप बाइंडिंग () को बदलने पर विचार कर सकते हैं (जैसे): $ (दस्तावेज़) .on ('mouseenter', '.mightOverflow', function () {...});

— जिद

यदि आप टूलटिप को स्वचालित रूप से हटा देना चाहते हैं, यदि पाठ अब संशोधित नहीं है: $ (दस्तावेज़) .on ('mouseenter', '.mightOverflow', function () {var $ t = $ (this); var = $ t.attr ('शीर्षक'), यदि (? शीर्षक) {if (this.offsetWidth <this.scrollWidth) $ t.attr ('शीर्षक', $ t.text ())} अन्य {{(this.offsetWidth>) = this.scrollWidth && शीर्षक == $ t.text ()) $ t.removeAttr ('शीर्षक')});

— क्रिस जैन्सेन

माउसइंटर वह घटना है जिसके लिए हम बाँधते हैं या सुनते हैं। हमें वास्तव में टूलटिप को तत्वों में नहीं जोड़ना है, जब तक कि कोई वास्तव में उन पर जीवन नहीं डालता है। इसलिए हम "डोमोवरफ़्लो" वर्ग के साथ डोम तत्वों में से किसी एक पर माउसेंटर के उस बिंदु तक जोड़ को टाल देते हैं। जस्ट-इन-टाइम-

— टूलिप्स

"As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document"अधिक जानकारी के लिए देखें api.jquery.com/bind और api.jquery.com/on

— Adrien Be

यह IE10 पर काम नहीं करता है - ऑफसेटविदथ स्क्रॉलविद के समान है, दोनों मुझे छंटनी की चौड़ाई दे रहे हैं।

— SsjCosty

Answer 2

यहाँ एक शुद्ध सीएसएस समाधान है। 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;
}

Comments

यह टूलटिप जितना अच्छा नहीं है, क्योंकि यह लेआउट को तोड़ सकता है।

— अलेक्जेंडर

टूलटिप्स के साथ समस्या यह है कि वे मोबाइल पर काम नहीं करते हैं, कम से कम अभी के लिए। यह उत्तर लेआउट को तोड़ सकता है (पढ़ें: शायद होगा), लेकिन इसे अनुकूलित किया जा सकता है, उदाहरण के लिए, होवर किए गए तत्व के लिए एक अलग पृष्ठभूमि रंग है। यह अभी भी मोबाइल पर काम नहीं करेगा, लेकिन यह डेस्कटॉप के लिए एक और विकल्प है।

— कोशिश

इस महान जवाब के लिए धन्यवाद जो मेरी जरूरतों को पूरी तरह से कवर करता है। कुछ जावास्क्रिप्ट का उपयोग करके, हम ब्लॉक को बिल्कुल अलग बनाने की कल्पना कर सकते हैं ताकि यह लेआउट को तोड़ न सके।

— नियाविल्स

यह एक अच्छा जवाब है, एक css मुद्दे पर जावास्क्रिप्ट ब्लोटिंग से बेहतर है। स्पष्ट रूप से दीर्घवृत्तीय SHOULD में एक स्वचालित शीर्षक विकल्प होता है, जिस समय इसे कार्यान्वित किया जाता है, उसमें कमी होती है। बहुत बुरा सीएसएस नहीं है केवल करने की अनुमति: मंडराना अगर पिछले अक्षर हैं '...'

— जॉन

Answer 3

uos u का उत्तर मौलिक रूप से सही है, लेकिन आप संभवतः इसे माउसेंटर इवेंट में नहीं करना चाहते हैं। यह गणना करने के लिए यह करने का कारण बनता है कि यदि यह आवश्यक है, तो प्रत्येक बार जब आप तत्व पर माउस ले जाते हैं। जब तक तत्व का आकार नहीं बदल रहा है, तब तक ऐसा करने का कोई कारण नहीं है।

तत्व को DOM में जोड़ने के तुरंत बाद इस कोड को कॉल करना बेहतर होगा:

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

या, यदि आपको पता नहीं है कि वास्तव में कब जोड़ा गया है, तो पेज लोड होने के बाद उस कोड को कॉल करें।

यदि आपके पास एक से अधिक तत्व हैं, जिनके साथ आपको ऐसा करने की आवश्यकता है, तो आप उन्हें सभी एक ही वर्ग (जैसे "mayOverflow") दे सकते हैं, और उन सभी को अपडेट करने के लिए इस कोड का उपयोग कर सकते हैं:

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

Comments

+1, इसे पेज लोड पर करना सरल लगता है, लेकिन अधिक संभावनाएं भी प्रदान करता है। अर्थात। आप इस तत्व को स्टाइल करना चाहते हैं जिसमें टूलटिप एक बिंदीदार रेखांकन के साथ टूलटिप को "सिग्नल" करने के लिए है। जैसे$(".mightOverflow").each(function() { if( $(this).offsetWidth < $(this).scrollWidth && !$(this).attr('title')){ $(this).attr('title', $(this).text()); $(this).css('border-bottom', '1px dotted #A8A8A8'); } });

— एड्रियन बन

'हर बार जब आप माउस ओवर करते हैं' गलत होता है (अब कम से कम - मुझे नहीं पता कि क्या जवाब अपडेट किया गया था) तो यह जांचता है कि क्या इसकी गणना पहले की गई थी '&&! $ this.attr (' शीर्षक ')

— रूण जेपेसेन

नहीं, यह सिर्फ शीर्षक विशेषता को फिर से जोड़ने से रखता है। यह निर्धारित करने के लिए कि यह आवश्यक है कि गणना अभी भी की गई है। this.offsetWidth < this.scrollWidthऔर संभवतया यहां तक ​​कि !$this.attr('title')हर बार जब आप तत्व पर माउस ले जाते हैं तो चेक भी किया जाएगा।

— एलिजर

इस पद्धति के साथ समस्या यह है कि सभी तत्वों को एक बार (संभावित प्रदर्शन प्रभाव) पर चेक किया जाता है और यह केवल एक बार गणना करता है, ताकि यदि उपयोगकर्ता ब्राउज़र को सिकोड़ता है, जिससे चीजें कम हो जाती हैं या फैल जाती हैं, जिससे उन्हें अब नहीं किया जा सकता है। टूलटिप की उपस्थिति का अद्यतन करें। विंडो को फिर से आकार देने के लिए अपने कोड को संलग्न करना एक प्रदर्शन मुद्दा होगा क्योंकि हर आइटम अपने आकार की जांच करता है। इवेंट डेलिगेशन "$ (डॉक्यूमेंट) .on ('माउसएंटर', '.mightOverflow', ..." का उपयोग करके और चेक को देरी करने तक आप तत्व को माउसओवर करते हैं, आप फ्लाई पर अपडेट कर सकते हैं और केवल 1 एलीमेंट @ ए टाइम को चेक कर सकते हैं

— क्रिस जैन्सेन

यह IE10 पर काम नहीं करता है - ऑफसेटविदथ स्क्रॉलविद के समान है, दोनों मुझे छंटनी की चौड़ाई दे रहे हैं।

— SsjCosty

Answer 4

यहाँ दो अन्य शुद्ध सीएसएस समाधान हैं:

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>

Comments

यही वह है जिसकी तलाश में मैं हूं!

— प्रणीत नाडकर

उत्कृष्ट समाधान, वास्तव में मुझे क्या चाहिए। धन्यवाद !

— अगु V

Answer 5

यहाँ मेरा 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

Comments

यह IE10 पर काम नहीं करता है - ऑफसेटविदथ स्क्रॉलविद के समान है, दोनों मुझे छंटनी की चौड़ाई दे रहे हैं।

— SsjCosty

@ SsjCosty आप IE 10 पर परीक्षण क्यों कर रहे हैं? इस बिंदु पर IE 10 का उपयोग करने वाला कोई भी नहीं होना चाहिए, क्योंकि कोई भी जो IE 10 स्थापित कर सकता है IE 11 स्थापित कर सकता है

— टोनी ब्रिक्स

आह अच्छी तरह से हम एक कंपनी की नीति है कि हमारे न्यूनतम IE संस्करण समर्थित 10. है। क्योंकि हमारे ग्राहकों (कुछ बैंकों और विभिन्न संस्थानों) का एक बहुत अभी भी IE10 है। ओह अच्छा।

— SsjCosty

Answer 6

हमें यह पता लगाने की आवश्यकता है कि क्या वास्तव में एलिप्सिस लागू है, फिर पूर्ण पाठ प्रकट करने के लिए टूलटिप दिखाने के लिए। यह केवल " this.offsetWidth < this.scrollWidth" की तुलना करते हुए पर्याप्त नहीं है जब तत्व लगभग अपनी सामग्री को पकड़े हुए है, लेकिन केवल चौड़ाई में एक या दो और पिक्सेल की कमी है, विशेष रूप से पूर्ण-चौड़ाई चीनी / जापानी / कोरियाई वर्णों के पाठ के लिए।

यहाँ एक उदाहरण है: http://jsfiddle.net/28r5D/5/

मुझे इलिप्सिस का पता लगाने में सुधार करने का एक तरीका मिला:

1. " this.offsetWidth < this.scrollWidth" पहले की तुलना करें , यदि विफल रहा तो चरण # 2 जारी रखें।
2. सीएसएस शैली को अस्थायी रूप से {'ओवरफ्लो' पर स्विच करें: 'दृश्यमान', 'व्हाइट-स्पेस': 'सामान्य', 'वर्ड-ब्रेक': 'ब्रेक-ऑल'}।
3. ब्राउज़र को रिलेटआउट करते हैं। यदि वर्ड-रैप हो रहा है, तो तत्व इसकी ऊँचाई का विस्तार करेगा जिसका मतलब है कि दीर्घवृत्त की भी आवश्यकता है।
4. सीएसएस शैली को पुनर्स्थापित करें।

यहाँ मेरा सुधार है: http://jsfiddle.net/28r5D/6/

Answer 7

मैंने एक jQuery प्लगइन बनाया है जो ब्राउज़र के बिल्ड-इन टूलटिप के बजाय बूटस्ट्रैप के टूलटिप का उपयोग करता है। कृपया ध्यान दें कि पुराने ब्राउज़र के साथ इसका परीक्षण नहीं किया गया है।

JSFiddle: https://jsfiddle.net/0bsosoy/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");
      }
    }
  });
};

Comments

सरल और शानदार। धन्यवाद!

— गमज

Answer 8

यह जो मैंने किया है। अधिकांश टूलटिप स्क्रिप्ट आपको एक फ़ंक्शन को निष्पादित करने की आवश्यकता होती है जो टूलटिप्स को स्टोर करती है। यह एक 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" फ़ंक्शन तब तक निष्पादित न हो जब तक कि सभी शीर्षक अपडेट नहीं किए गए हों। "सेटअपटूलिप" को अपने टूलटिप फ़ंक्शन और * उन तत्वों के साथ बदलें, जिन्हें आप जांचना चाहते हैं। * यदि आप इसे छोड़ देते हैं तो आप उन सभी से गुजरेंगे।

यदि आप केवल ब्राउज़र टूलटिप के साथ शीर्षक विशेषताओं को अपडेट करना चाहते हैं, तो आप इसे सरल बना सकते हैं:

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

Comments

क्यों होता है पतन? कृपया टिप्पणी करें कि क्या आप ऐसा कर रहे हैं ताकि लोगों को पता चले कि समस्या क्या है। धन्यवाद।

— fanfavorite

Answer 9

यदि आप इसे पूरी तरह से जावास्क्रिप्ट का उपयोग करना चाहते हैं, तो मैं निम्नलिखित कार्य करूंगा। स्पैन को एक आईडी विशेषता दें (ताकि इसे आसानी से 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 का उपयोग करना चाहते हैं, तो इससे अधिक सुरुचिपूर्ण समाधान हैं।

Comments

अच्छा लगा। चूँकि मैं इस पृष्ठ के अन्य भाग में JQuery का उपयोग कर रहा हूँ - JQuery का सुरुचिपूर्ण समाधान क्या है ??

— स्पाइडरमैन

$("#myDataId").attr("title", function() { var innerText = $(this).text(); var content = $(this).attr("content"); if (innerText.length <= content.length) { return content; } return null; });

— मार्क कोस्टेलो

मैंने आपके पहले सुझाव को शुद्ध जावास्क्रिप्ट के साथ आज़माया - यह काम नहीं करता। 'इनरटेक्स्ट' संपत्ति पाठ की पूरी लंबाई को बचाती है, भले ही वह पूरी तरह से स्क्रीन पर हमेशा नहीं दिखाती हो: elemInnerText.length == elemContent.length !!

— स्पाइडरमैन

आपके स्पैन की शैली चौड़ाई is१ है। अगर स्ट्रिंग की चौड़ाई उससे अधिक है तो जांच क्यों नहीं? यदि आप वास्तव में कुछ कायरता करना चाहते थे, तो आप पाठ-अतिप्रवाह के बिना एक छिपे हुए तत्व को जोड़ सकते थे: दीर्घवृत्त सेट और दोनों की चौड़ाई की तुलना करें। यदि छिपा हुआ गैर-छिपा हुआ से व्यापक है, तो दृश्यमान में शीर्षक विशेषता जोड़ें।

— मार्क कोस्टेलो

Answer 10

मेरे पास सीएसएस क्लास है, जो निर्धारित करता है कि एलिप्सिस कहां रखा जाए। उसके आधार पर, मैं निम्नलिखित करता हूं (तत्व सेट अलग हो सकता है, मैं उन्हें लिखता हूं, जहां एलिप्सिस का उपयोग किया जाता है, निश्चित रूप से यह एक अलग वर्ग चयनकर्ता हो सकता है):

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

Comments

i मेरा मामला thisएक था anchorइसलिए मैंने this.text()इसके बजाय का इस्तेमाल कियाval()

— बशीर अल-मम्मी

Answer 11

यहाँ एक वेनिला जावास्क्रिप्ट समाधान है:

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

Answer 12

यह मेरा समाधान था, एक आकर्षण के रूप में काम करता है!

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

Comments

हाय @FarukT आपके समाधान मेरे लिए ठीक काम कर रहा है, बहुत बहुत धन्यवाद। मैं पूछना चाहता हूं कि क्या मेरे पास दो html टैग्स इनपुट और स्पैन हैं और मैं उन ऑफसेट्स का उपयोग करके कुछ Arithmetic कैलकुलेशन करने के लिए एक ही समय में इन दोनों टैग्स की ऑफसेटविद्या की गणना करना चाहता हूं। मुझे यह कैसे करना है?

— कुणाल त्यागी

हाय @KunalTyagi, आप इसे 2 अलग-अलग कार्यों के साथ कर सकते हैं, मुझे केवल एक इनपुट और अवधि के साथ लिखा गया था, लेकिन आप इस फ़ंक्शन को 2 बार दोहरा सकते हैं, केवल इनपुट के साथ पहले फ़ंक्शन और दूसरे फ़ंक्शन में केवल अवधि। इस तरह: $ (दस्तावेज़) .on ('माउसओवर', 'इनपुट', फंक्शन () {...}); और दूसरा एक $ (दस्तावेज़) .on ('माउसओवर', 'स्पैन', फंक्शन () {...});

— फारुक

Answer 13

ऊपर दिए गए किसी भी समाधान ने मेरे लिए काम नहीं किया, लेकिन मैंने एक शानदार समाधान निकाला। लोग जो सबसे बड़ी गलती कर रहे हैं वह सभी 3 सीएसएस संपत्तियों को पगेलॉड पर घोषित किया गया है। आपको उन शैलियों को जोड़ना होगा + टूलटिप को गतिशील रूप से IF और ON केवल यदि आप जिस अवधि के लिए एक दीर्घवृत्त चाहते हैं वह उसके मूल से व्यापक है।

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

Answer 14

आप संभवतः एक और स्पैन के साथ स्पैन को घेर सकते हैं, फिर बस परीक्षण कर सकते हैं कि मूल / आंतरिक स्पैन की चौड़ाई नए / बाहरी स्पैन की तुलना में अधिक है या नहीं। ध्यान दें कि मैं संभवतः कहता हूं - यह मोटे तौर पर मेरी स्थिति पर आधारित है जहां मेरे 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());
            }
        }
    });
}