Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts

    JavaScript technique to truncate text and show simple tooltip

    Hello:

    Is there a relatively simple way to show a basic tooltip (or TITLE attribute) only if a CSS text-overflow ellipsis is present?

    I have several areas on a dynamic site where the text gets truncate by a CSS overflow / ellipsis technique:
    Code:
    .truncate {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .one {
    width: 150px;
    }
    
    .two  {
    width: 250px;
    }
    
    .......
    
    <div class="one">...</div>
    
    
    <div class="two">...</div>
    
    etc.
    Is there a simple JavaScript I can use to show a :hover tooltip to show the rest of the data only if the text gets truncated?

    Thanks for your help.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    if you don't need to click in the divs you want to snuff the title of, you can actually use a tiny bit of css to handle this:


    Code:
    div[class]:not(.truncate):hover {
      pointer-events: none;
    }

    if you add another non-truncated class to the other divs, you can get rid of the :not and the div[class] to make it simpler and more backwards-compatible.

    using jQuery, you can simply remove the title using a related selector and a built-in:
    Code:
    $("div[class]:not(.truncate)").attr("title", "");
    Last edited by rnd me; 06-02-2014 at 12:13 AM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,025
    Thanks
    56
    Thanked 567 Times in 564 Posts
    I thought he was trying to do the opposite...
    Code:
    <script type="text/javascript">
    var divs =document.querySelectorAll(".truncate");
     for (var a=0;a<divs.length;a++){
     var thediv = divs[a];
     if (thediv.scrollWidth > thediv.clientWidth){
     thediv.title = thediv.innerHTML;
    	}
     }
    </script>

  • #4
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by spacepoet View Post
    Hello:

    Is there a relatively simple way to show a basic tooltip (or TITLE attribute) only if a CSS text-overflow ellipsis is present?

    I have several areas on a dynamic site where the text gets truncate by a CSS overflow / ellipsis technique:
    Code:
    .truncate {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .one {
    width: 150px;
    }
    
    .two  {
    width: 250px;
    }
    
    .......
    
    <div class="one">...</div>
    
    
    <div class="two">...</div>
    
    etc.
    Is there a simple JavaScript I can use to show a :hover tooltip to show the rest of the data only if the text gets truncated?

    Thanks for your help.





    I do not think that will work, since the .truncate class is always on the element. My error for forgetting to add it to the element - sorry!

    I was trying to figure out how to get it to do something like:
    Code:
    <div class="one truncate">No overflow</div>
    
    <div class="two truncate">Very loooooog text so this will at some point need the truncate to cut it off and add the ellipsis</div>
    So when the overflow occurs in the second div, the JavaScript detects there is an ellipsis present and somehow allows all the text to be read on :hover with a title attribute:
    Code:
    <div class="two truncate" title="Very loooooog text so this will at some point need the truncate to cut it off and add the ellipsis">Very loooooog text so th...</div>
    Any thoughts on this?

    Sorry about my error in the first post.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,025
    Thanks
    56
    Thanked 567 Times in 564 Posts
    Quote Originally Posted by spacepoet View Post
    So when the overflow occurs in the second div, the JavaScript detects there is an ellipsis present and somehow allows all the text to be read on :hover with a title attribute:
    Any thoughts on this?
    ummm... only what I posted above...


  •  

    LinkBacks (?)

    1. 06-02-2014, 08:05 AM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •