Как сделать простую всплывающую подсказку мыши с помощью jQuery?

Как я могу сделать простую всплывающую подсказку мыши с помощью jQuery?

Я хочу показать связанную подсказку для перечисленной информации, связанные подсказки и информация находятся в одной ячейке таблицы. Я не хочу использовать плагин для этого.

При onmouseover к какой-либо ссылке отображается соответствующая всплывающая подсказка, а при onmouseover к всплывающей подсказке окно всплывающей подсказки не закрывается. Когда вы onmouseout любую область на странице, кроме всплывающей подсказки или связанной ссылки, всплывающая подсказка закроется.

Я хочу сделать простую подсказку, как этот плагин . Есть ли простой способ для этого без использования плагина?

HTML

 {amp}lt;table width="600"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;a href="#" class="link"{amp}gt;Link-1{amp}lt;/a{amp}gt; {amp}lt;div class="tooltip"{amp}gt;(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s{amp}lt;/div{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;a href="#" class="link"{amp}gt;Link-2{amp}lt;/a{amp}gt; {amp}lt;div class="tooltip"{amp}gt;(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged{amp}lt;/div{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;a href="#" class="link"{amp}gt;Link-3{amp}lt;/a{amp}gt; {amp}lt;div class="tooltip"{amp}gt;(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop{amp}lt;/div{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;a href="#" class="link"{amp}gt;Link-4{amp}lt;/a{amp}gt; {amp}lt;div class="tooltip"{amp}gt;(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.{amp}lt;/div{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; 

CSS

 table td { position:relative; } .tooltip { width:400px; height:300px; padding:20px; border:1px solid #ccc; box-shadow: 0 0 3px rgba(0,0,0,.3); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3); border-radius:3px; -webkit-border-radius:3px; position:absolute; top:5px; left:50px; display:none; } 

JQuery

 $(function(){ $('.link').hover( function(){ $(this).next().show(); }, function(){ $(this).next().hide(); } ) }) 

JSFiddle

http://jsfiddle.net/96j44/

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector