2013-03-12 82 views
3

在我當前的項目中,我使用jQuery UI的工具提示來顯示其他信息。在這個項目中,我有一些表格,其中一些列的文本不適合,所以它們的一部分是隱藏的。我正在考慮使用類似jQuery的工具提示,因此當用戶將鼠標放在剪切單元上時,工具提示會顯示完整的文本。問題是用戶將無法選擇文本。jQuery UI工具提示,我可以從中複製文本嗎?

有人知道是否可以配置jQuery UI工具提示,使可能的複製/剪切文本或任何其他可能對我有用的插件?

謝謝!

回答

0

最後,我這樣做:

CSS

.overflow_hidden_cell{ 
    overflow: hidden; 
    white-space: nowrap; 
} 
.overflow_hidden_cell_hover{ 
    overflow: visible; 
    width: 300px; 
    position: absolute; 

    -webkit-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.7); 
    -moz-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.7); 
    box-shadow:   0px 0px 15px rgba(50, 50, 50, 0.7); 

} 

JS

function setOverflowCells(){ 
    $('.overflow_hidden_cell').bind('mouseover', function(){ 
     $(this).addClass('overflow_hidden_cell_hover'); 
    }).bind('mouseleave', function(){ 
     $(this).removeClass('overflow_hidden_cell_hover'); 
    }); 
} 

而我給了類的.overflow_hidden_​​cell「來,可能有一個文本太長的每一個細胞。我希望這能幫助有同樣問題的人。

+0

謝謝,這是一個非常好的解決方案。正是我所期待的。 只需稍加改進: 您不需要任何js。只需使用CSS中的':hover'屬性即可。 – 2016-05-09 09:28:28

0

您不能複製工具提示,但您確實有其他選項。如果你在縮短的文本上添加了「onclick」或「onmouseover」,你可以用jquery插件將它複製到剪貼板。 http://bradleysepos.com/projects/jquery/clipboard/

+0

可以這樣做。請看我的答案。 – 2013-06-20 17:41:51

0

你可以用jquery ui工具提示來做這個,稍微調整一下。以下的答案必須以一個不同的問題恰好解決了這個問題(對我的作品):

https://stackoverflow.com/a/15014759/867704

此外,該「jQuery的工具」工具提示是提供一個工具提示,其文本可以在默認情況下被複制插件:

http://jquerytools.org/documentation/tooltip/

+0

我認爲第二個鏈接應該更新爲http://jquerytools.github.io/download/ – T30 2016-01-04 15:37:46