隱藏帶點的文本並在鼠標懸停上顯示它

Question

我在頁面加載時顯示應用程序名稱。如果應用程序名稱太大，我想用點來部分顯示它，並希望在mousehover上顯示完整的應用程序名稱。我正在嘗試做，但沒有得到確切的解決方案。任何人都可以幫助我。 我正在使用jQuery的asp.net 4.0。

感謝 阿斯瑪

Answer 1

使用像下面

<span title="long name">long...</span> 

使用title顯示全名。鼠標懸停在顯示屏上

如果您想要設置工具提示的樣式，請使用以下插件。

http://twitter.github.com/bootstrap/javascript.html#tooltips

Answer 2

您可以生成HTML這樣

<li class="someclass" data-short="app..." data-full="application">app...</li> 

假設你使用L1標籤等JQ代碼將

$(function() { 
    $(".someclass").mouseover(function() { 
     $(this).html($(this).data('full')); 
    }); 
    $(".someclass").mouseout(function() { 
     $(this).html($(this).data('short')); 
    }); 
}); 

Answer 3

嘗試使用string類和標題的子功能該控件的屬性

Answer 4

<!-- make sure you have the jquery library loaded !--> 

<div class="application_name">My Long Application Name</div> 
<div class="application_name">My Long Application Name</div> 
<div class="application_name">My Long Application Name</div> 

<script type="text/javascript"> 

    // on page load 

    var max_characters = 10; 

    $(document).ready(function(){ 

     // iterate all application names 

     $('.application_name').each(function(){ 

      // establish if they contain more than your desired number of characters 

      if($(this).html().length > max_characters){ 

       // attach nesting divs to the DOM to work with later 

       var html = ''; 

       html += '<div class="long_application_name" style="display:none;">'; 
       html += $(this).html(); 
       html += '</div>'; 
       html += '<div class="short_application_name">' 
       html += $(this).html().substring(0, max_characters) + '...'; 
       html += '</div>'; 

       $(this).html(html); 

      } 

      $(this).mouseover(function(){ 

       // show hide the appropriate nested divs 

       $(this).find('.long_application_name').show(); 
       $(this).find('.short_application_name').hide(); 

      }) 

      $(this).mouseout(function(){ 

       // show hide the appropriate nested divs 

       $(this).find('.long_application_name').hide(); 
       $(this).find('.short_application_name').show(); 

      }) 
     }) 
    }); 

</script>