純CSS工具提示沒有jQuery的

可能重複：
How can I create a 「tooltip tail」 using pure CSS?純CSS工具提示沒有jQuery的

我想，當你將鼠標懸停在人的個人資料，並有一個簡短創建一個Facebook/Twitter的風格提示（那件事他們的簡介摘要）。我遇到了很多教程，但他們使用jQuery。有沒有辦法做到這一點是CSS和可能的JavaScript？

+我想爲此工作的圖像以及。

感謝

來源

2012-11-22 Jadd23

@GeorgeStocker不是重複。 'tooltip'這個詞是一個紅色的鯡魚，問題是關於用CSS創建三角形。 – Stijn

@stijn你最好做的事情是根據它真正要求的內容進行編輯，而不會使答案失效。 –

你可以用純CSS做

您可以使用懸停僞類來觸發它。

這是應該讓你開始

div.profile-on-hover { display: none } 
a:hover + .profile-on-hover { display: block } 

<a>hover me</a> 
<div class="profile-on-hover">bunch of stuff</div>

http://jsfiddle.net/AsKpv/

股利將需要遵循一個標籤爲「+」，如果你用CSS

工作是一個籠統的概念想讓它變得時髦，你可以使用opacity：0和opacity：1以及css3轉換來使它淡入。

好運

來源

2012-11-22 19:28:01 Jesse

我用它從http://www.webblogsforyou.com/tooltip-example-show-hide-hint-help-text-using-css3-transition/這裏的css3轉換。 –

純CSS工具提示沒有jQuery的

回答

相關問題