Как отобразить дополнительную информацию при перемещении указателя мыши над кнопкой?

Question

Я использую рельсы v3.2.2 и jquery-rails v2.0.2 ruby-gems. Я хотел бы отобразить дополнительную информацию, когда я перемещаю указатель мыши над кнопкой, например, Facebook, Google и другие компании в своих приложениях.

Ниже приведен скриншот из Google Gmail, который показывает, что я хотел бы реализовать в своем приложении:

Как и что я могу сделать?

Answer 1

Проверьте плагин всплывающей подсказки jQuery Qtip.

Answer 2

Как насчет использования атрибута title на ярлыке кнопки?

Что-то вроде:

<input type="button" title="your message" value="Button" /> 

Answer 3

Рассмотрим подсказках библиотеку, из которой есть много, в том числе:

• Poshy: http://vadikom.com/demos/poshytip/
• ColorTip: http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html
• Grumble: http://jamescryer.github.com/grumble.js/

Веб-поиск будет отображаться еще много.

Answer 4

Существует несколько способов сделать это, используя CSS и/или JavaScript. Вот основное решение CSS:

HTML

<button>Button text</button> 
<div class="tooltip">Tooltip Content</div>​ 

CSS

.tooltip { display: none; } 
button:hover+.tooltip { display: block; }​ 

http://jsfiddle.net/b7AF7/