Dominus77 / yii2-advanced-start

Yii2 Start Project Advanced Template
https://dominus77.github.io/yii2-advanced-start/
MIT License
23 stars 12 forks source link

Bootstrap tooltip not work #20

Closed polinwei closed 6 years ago

polinwei commented 6 years ago

I modify the code 'original-title' => Module::t('module', 'Click to change auth key') in the view: _profile.php , I follow the index.php to want to show tooltip , but not work. Could you tell me why?

tooltip

HTML:

[
    'attribute' => 'auth_key',
    'format' => 'raw',
    'value' => function($data){
        if ( $data->id == Yii::$app->user->identity->getId()){
            $this->registerJs("$('#gen_auth_key_link_" . $data->id . "').click(handleAjaxLink);", \yii\web\View::POS_READY);
            return Html::label($data->auth_key,'',[
                    'id' => 'auth_key_' . $data->id,
                    ]) .' '.
                Html::a('<span class="label label-warning">Generate</span>' , Url::to(['gen-authkey', 'id' => $data->id]) , [
                    'id' => 'gen_auth_key_link_' . $data->id,
                    'data' => [
                        'pjax' => 0,
                        'toggle' => 'tooltip',
                        'replace-id' => 'auth_key_' . $data->id,
                        'original-title' => Module::t('module', 'Click to change auth key'),
                    ],
                ]);

        }

        return $data->auth_key;
    }

],
Dominus77 commented 6 years ago

Try this:

Html::a('<span class="label label-warning">Generate</span>' , Url::to(['gen-authkey', 'id' => $data->id]) , [
    'id' => 'gen_auth_key_link_' . $data->id,
    'title' => Module::t('module', 'Click to change auth key'),
    'data' => [
        'pjax' => 0
        'toggle' => 'tooltip',
        'replace-id' => 'auth_key_' . $data->id,
    ]
]);

or register the tooltip on the data-original-title: https://github.com/Dominus77/yii2-advanced-start/blob/4d09e4b3d92e02edf8a92ed81e46e9f9ca0ed205/backend/web/js/dashboard.js#L10

polinwei commented 6 years ago

The method: yii2-advanced-start/backend/web/js/dashboard.js does not work.

$('[data-toggle="tooltip"]').tooltip();

Dominus77 commented 6 years ago

Create a test link https://github.com/Dominus77/yii2-advanced-start/blob/a15144514de7064e8e996a2b0234bbf91bfc26eb/modules/main/views/frontend/default/index.php#L19

2018-01-18_115133

To support the tooltip in the frontend do the following:

  1. Create js file: /frontend/web/js/my_script.js
    /**
    * My scripts
    */
    $(function () {
    $('[data-toggle="tooltip"]').tooltip();
    });
  2. Connect it to AppAsset.php https://github.com/Dominus77/yii2-advanced-start/blob/a15144514de7064e8e996a2b0234bbf91bfc26eb/frontend/assets/AppAsset.php#L33-L35

We check:

2018-01-18_115238

Done!

Dominus77 commented 6 years ago

Another way to register the script in the current form: View:

<?php
/* @var $this yii\web\View */
$this->registerJs("
    $(function () {
        $('[data-toggle=\"tooltip\"]').tooltip();
    });
");
?>
<a href="#" data-toggle="tooltip" title="This title tooltip">Link</a> 

or

<?php
/* @var $this yii\web\View */
$this->registerJs(new \yii\web\JsExpression("
    $(function () {
        $('[data-toggle=\"tooltip\"]').tooltip();
    });
"), yii\web\View::POS_END);
?>
<a href="#" data-toggle="tooltip" title="This title tooltip">Link</a>

Done!