Gridview Mouseover Event

Hi, I want to display some details in case of a mouse over event on a particular cell of the Gridview thank you in advance


1 Like

For a particularly easy, js free implementation, you could just put the text into the "title" attribute of a div containing the data.

In your CGridView column configuration:



        return CHtml::tag('div', array('title'=>'Hover text'), 'Cell content');


1 Like

You can implement it with jQuery

<?php Yii::app()->clientScript->registerScript("mySuperAwesomeScript", "

    $('#yourGrid-id').on('mouseover mouseout', 'table tr', function(event) {

        if (event.type == 'mouseover') {

            /* show / display your details */

        } else if (event.type == 'mouseout') {

            /* hide / remove your details */



"); ?>

Edit: I really like Keith’s approach. Mine is overdoing it :)

Hi Keith,

Thanks for this. It works. Do you know how to add html code into title attribute?