Tooltips for CGridView.

Yii 1.1 General Discussion
1

Is there any way to add a tooltip to the sort link in the header of a CGridView? (something like "Click here to sort").

Also, is there any way to add text and hints to the search fields of a CGridView? (something like "Search by <field label>". The text would disappear on focus, and appear on blur.

The problem is, I made a simple usability test with some volunteers, and they could not figure out how to sort and how to search, so a visual hint is needed, and I don’t want to place a long explanation (that users wouldn’t read anyway) above the grid.

2

You can use some jQuery magic to access all element you want to have tooltips.

In CGridView case, you can assign title attribute to <A> elements or table cells if you prefer.

For table cells:


$('[id^=EXAMPLE-grid]').attr('title','Click here to sort');

For links


$('[id^=EXAMPLE-grid a]').attr('title','Click here to sort');

If you dig sexy tooltips, use Tipsy widget and chain .assClass(‘tooltipme’) in one go with previous code.

However, if you prefer to have per item control over tooltips, you can set title attribute in header.


'columns'=>array(

	array('header'=>'<span title="my tooltip">Header name</span>', 'name'=>'code','htmlOptions'=>array('width'=>'80')),

Text fields.

jQuery to the rescue, again :)


$("input[name^=ModelPrefix]").each(function() {

    var default_value = this.value;

    $(this).css('color', '#666');

    $(this).focus(function() {

        if(this.value == default_value) {

            this.value = '';

            $(this).css('color', '#333');

        }

    });

    $(this).blur(function() {

        if(this.value == '') {

            $(this).css('color', '#666');

            this.value = default_value;

        }

    });

});

I hope it helps.

3

Hi MetaYii,

Could you find any way to add tooltip in search fields?