README

Yii2 qtip プラグイン: http://qtip2.com/

このプラグインは、qtipを要素にハックする処理を行っています。

このプラグインの使用方法は非常に簡単です。例を示します

\sammaye\qtip\Qtip::widget([
    'hook' => '.what_does_this_mean',
    'content' => [
        'text' => new JsExpression("function(api){
            var caption = $(this).data('caption');
            return '<p style=\'font-size:13px; line-height:17px; margin:0;\'>'+caption+'</p>';
        }")
    ],
    'style' => [ 'classes' => 'ui-tooltip-shadow ui-tooltip-light' ],
    'position' => [
        'my' => 'bottom center',
        'at' => 'top center'
    ]
]);

実際には、ウィジェットプロパティは2つしかありません。1つは、もう1つはです。他のすべてのプロパティ（content、style、positionなど）は、JSONで直接JavaScriptのqtipプラグインのコンストラクタにエンコードされるためのoptionsプロパティにマジックで追加されています。

これは、このプラグインの使用方法を理解するために、hookが何であるかを知るだけで十分であることを意味します。hookは、ツールチップが表示される要素を示します。例として

<a href="#" class="what_does_this_mean" data-caption="The publisher has decided not to proceed with the publication of this book.">Details</a>

これにより、ユーザーがこのリンクをホバーすると、data-captionの内容を含むツールチップが表示されます。実際のJavaScriptでは、以下のようになり、プラグインがエコーします

$('.what_does_this_mean').qtip({
    "content":{
        "text":function(api){
            var caption = $(this).data('caption');
            return '<p style=\'font-size:13px; line-height:17px; margin:0;\'>'+caption+'</p>';
         }
    },
    "style":{
       "classes":"ui-tooltip-shadow ui-tooltip-light"
    },
    "position":{"my":"bottom center","at":"top center"}
});

このプラグインのすべてのコンポーネントの使用方法（透明な性質のため）については、qtipドキュメントを参照してください: こちら.

すべての問題をGitHub issuesに提出してください。

サンマイヤー / yii2-qtip

メンテナナー

詳細

README