2016-05-05 13 views
0

私のレスポンシブウェブページのテキストボックスにフォーカスが当てられ、ぼかしのときにツールチップが消えるときは、ツールチップを使用したいと思います。javacript/jqueryレスポンスツールヒント閉じるボタン

誰かがこの目的に最も適したjavascript/jqueryライブラリを教えてください。以下は私の要件ですか?

  1. ツールチップは、小さな画面(例:モバイルデバイスは適切な場所に表示する必要があります。

  2. モバイルデバイスに外乱を発生させるときは、閉じる必要があるように、ツールチップにボタンを閉じる必要があります。

答えて

0

ブートストラップ以外オプション

Opentip強力で、設定可能な、かなり軽量に見えます。

Tippedjsよく見え、よく書かれています。

ToolTipsterもよく開発され、文書化されています。

jQuery UIも確かに法案に適合します。

注意の注意。一般的に、これらのようなライブラリを小さな機能用に組み込む場合、最も広く使用され、テストされ、文書化された選択肢に進むことが望ましいとわかります。新しいソフトウェアやドキュメント化されていないソフトウェアを使用すると、奇妙なバグに答えることなく、あなた自身を見つけることができます。

ブートストラップがOKであれば

Bootstrapは十分にテストし、様々な共通JavaScript enabled view componentsのライブラリを使用して簡単に持っています。

tooltips hereが見つかります。

通常、JavaScriptコンポーネントには少し余分なマークアップが含まれていますが、それを自分で実装しようとする時間を節約することは、その価値があります。あなたのツールのヒントについて:彼らはボタンを指定する方法

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> 

お知らせdata-toggle="tooltip"属性を持つツールチップを持っていますか? title="Your tooltip text here"は、あなたのツールチップのテキストになります。

jQueryが有効なので、これも要件に合っているはずです。

+0

ありがとう@bideowegoしかし、私はこの目的のためにブートストラップを使いたくありません。 – Syed

+0

ブートストラップを使用しないという要件はありますか?純粋なJavaScriptソリューションをお探しですか? – bideowego

+0

@Syed Bootstrapのツールチップは、あなたの質問で要求するようにjQueryライブラリです。ツールヒントのみを使用する場合は、Bootstrapをすべて含める必要はありません.JavaScriptは、関連するCSS(少なくともLESSと同じ)と同様に、別途入手できます。 – Thernys

関連する問題