Custom Tooltip on tabs using CJuiTabs

Yii 1.1 General Discussion
1

Hello !

Im using CJuiTabs for one of my views… everything works fine accept one thing - whenever I’m doing a mouse hover on the tab, it displays a tooltip with tab title.

Can I set customized text (not the tab title) for Tooltip each tab?

i.e

TabName - Tooltip title

Basic - "Blah Blah"

Agents - "Yippee Yippee"

General - "Hurrey Hurrey"

…




$this->widget('zii.widgets.jui.CJuiTabs', array(

    'tabs' => array(

      'Basic'     => $this->renderPartial('_formMain'), true),

      'Agents'    => $this->renderPartial('_formAgents'), true),

      'General'   => $this->renderPartial('_formGeneral'), true),

      'Travel'    => $this->renderPartial('_formTravel'), true),

      'Vendors'   => $this->renderPartial('_formVendors'), true),

      'Finance'   => $this->renderPartial('_formFinancial'), true),

      'IT'        => $this->renderPartial('_formIT'), true),

      'Reports'   => $this->renderPartial('_formReporting'), true),

    ),

   'headerTemplate' =>

      '<li><a href="{url}"  title="{title}">{title}</a></li>',

   'options' => array('title' => 'Client Information'),

  ));

Thanks

2

Hi

I found solution on my own.

I added "id" to CJuiTabs and fetched href of all subtabs in jquery.

In jquery i added tooltip. ;)




$this->widget('zii.widgets.jui.CJuiTabs', array(

    'tabs' => array(

      'Basic'     => $this->renderPartial('_formMain'), true),

      'Agents'    => $this->renderPartial('_formAgents'), true),

      'General'   => $this->renderPartial('_formGeneral'), true),

      'Travel'    => $this->renderPartial('_formTravel'), true),

      'Vendors'   => $this->renderPartial('_formVendors'), true),

      'Finance'   => $this->renderPartial('_formFinancial'), true),

      'IT'        => $this->renderPartial('_formIT'), true),

      'Reports'   => $this->renderPartial('_formReporting'), true),

    ),

   'headerTemplate' =>

      '<li><a href="{url}"  title="{title}">{title}</a></li>',

   'options' => array('title' => 'Client Information'),

   // Added id 

'id'=>'account_subtabs',

  )); 





    <script>

        //Add ToolTips to sub tabs of account

         jQuery(document).ready(function()

            {        

                     $('a[href=#account_subtabs_tab_0]').tooltip({content: "Blah Blah"});

                     $('a[href=#account_subtabs_tab_1]').tooltip({content: "Yippee Yippee"});

                     $('a[href=#account_subtabs_tab_2]').tooltip({content: "Hurrey Hurrey"});

                          }

        );

    </script>

:)

3

Excelent… I need this solution to change the text in tabs… Thanks…