javascript - マウスオーバーにテキストを表示するためのアイコンを配置する

Question

私はeコマースサイトを開発しました。ユーザーフォーム入力ボックスには、ヘルプツールとして疑問符アイコンを配置したいと思います。ユーザーがそのアイコンにマウスを合わせると、ヘルプテキストが表示されます。私はそれを行う方法を取得していません。誰かがこれをするのを手伝ってください。

ありがとう

Answer 1

非表示の div を配置して、マウス ホバーで表示することができます。クールなツール ヒントを探している場合は、Qtip を使用できます。

$(document).ready(function() 
{
   $('img[title]').qtip({
      content: {
         text: false // Use each elements title attribute
      },
      style: 'cream' // Give it some style
   });
});

Answer 2

ここにあなたのためのアイデアがあります。http://jquerytools.org/demos/tooltip/index.html

Answer 3

JQueryツールチップを検索すると、非常に役立ちます。

私はこれを見つけました: http://vadikom.com/demos/poshytip/

次のように使用できます。

$('#my-html-element').poshytip();

アイコンにクラスまたは ID のアノテーションを付ける場合は、上記の呼び出しだけで十分です。

次のような入力ボックスなどのフォーム要素もサポートしています。

$('#demo-form-name').poshytip({
    className: 'tip-yellowsimple',
    showOn: 'focus',
    alignTo: 'target',
    alignX: 'right',
    alignY: 'center',
    offsetX: 5
});