jQuery在懸停上展開文本

在我們的網站上，我們目前通過從雲提供商獲取數據並在表格中顯示數據來顯示說明文字。但是，有時我們希望描述更長，但超出了可用區域，我們的CSS定義了省略號的溢出。我正在尋找添加jQuery代碼來展開懸停上的隱藏文本，但不會搞亂表格行的高度或寬度。如果不增加行的高度，我嘗試在懸停上編輯高度的CSS解決方案將無法正常工作。jQuery在懸停上展開文本

如果隱藏的文本可以通過停留在所有其他元素之上來彈出現有文本，那將會很棒。彈出窗口還應該在一定寬度後自動進入一個新的行，因此彈出窗口甚至可以保持在下面的行的頂部。 popover周圍的邊界或陰影會很好。

我是新來的Javascript，jQuery和一般的網頁編碼，但我可以處理這個東西。我已經嘗試了幾個從網絡上懸停的示例，但無法讓他們爲我工作。

下面是它目前的樣子用隨機數據填充：

來源

2013-08-12 urover

使用一個jQuery插件提示。您也可以通過設置標題屬性的標題嘗試jQuery UI的工具提示http://jqueryui.com/tooltip/

的全部內容它有點矯枉過正擁有jQuery UI的只是工具提示達到類似的效果。所以你可以搜索谷歌上的其他人

來源

2013-08-12 07:11:09

我喜歡默認工具提示的外觀。我也能夠移動工具提示，所以我認爲我可以使它完全彈出描述TD元素。但是，如果它只能使用工具提示（標題）元素，我不確定如何使用TD元素。 – urover

你使用任何元素的title屬性''td title =「Something」> Data' –

謝謝。我移動了工具提示以覆蓋td元素。然而，工具提示的一個錯誤（或者它是一個特徵？）是，在懸停時，它會眨眼幾次，然後保持穩定。有沒有其他的jQuery UI技巧可以實現類似的功能？ – urover

您可以使用此類型的機制：

<a class="zoom" href='#' style='font-size:12px;top:50px;left:50px'>Hover me!</a>

主要

.zoom { 
     -webkit-transition: all .2s ease-in-out; 
       transition: all .2s ease-in-out; 
    } 
    .zoom:hover { 
     -webkit-transform: scale(1.4); 
       transform: scale(1.4); 
    }

然後省略號你可以使用小例子代碼：

<ul> 
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li> 
<li><span class="icon"></span>Short text</li> 
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li> 
</ul>

和CSS

.icon { 
height:18px; 
width:18px; 
background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png); 
float:right; 
cursor:pointer; 
background-position:-72px -72px; 
display: block; 
} 
.icon:hover { 
background-position:-90px -72px; 
} 
li { 
    text-overflow:ellipsis; 
    height:20px; 
    overflow:hidden; 
    white-space:nowrap; 
    list-style-type:none; 
    width:150px; 
}

來源

2013-08-12 07:10:57 vamsi

嗨，我不想放大/縮小文本。我想顯示懸停時省略號隱藏的文字。對困惑感到抱歉！ – urover

您可以使用上面編輯的答案。 – vamsi

這似乎沒有做任何事情，或者我無法正確使用它。此外，darkroomart網址要求輸入密碼，因此我刪除了該屬性。 – urover

jQuery在懸停上展開文本

回答

相關問題