Jquery or bootstrap tooltip in Header

Discuss MySQL Ajax Table Editor Paid Version

Jquery or bootstrap tooltip in Header

Postby hexxamillion » Wed Oct 28, 2015 9:31 pm

I have been trying to add jquery or boostrap tooltip to the table headers. Ive tried a few suggestions from the forums but most are overkill for what I need. Any suggestions on a method to apply tooltip to table headers? It's important to note that I am using the inline edit design..

Or even tooltips to table content.
hexxamillion
 
Posts: 100
Joined: Fri Jul 08, 2011 11:36 pm

Re: Jquery or bootstrap tooltip in Header

Postby KarelB » Fri Oct 30, 2015 1:02 pm

What i use is a very simple method that initially does not require jquery or bootstrap tooltip

Use the col_header_info option to set any long title.
Code: Select all
col_header_info' =>  'title="'My long description'"


This will show an eliminatory tooltip. If that is not sufficient you should be able to take it from here and add jQuery or BS tooltips.
Hope this helps

KArel
KarelB
 
Posts: 458
Joined: Mon Dec 01, 2008 11:49 pm
Location: The Netherlands

Re: Jquery or bootstrap tooltip in Header

Postby KarelB » Fri Oct 30, 2015 3:04 pm

And if you want to have tooltips on tablecontent you can use a table_fun callback
Something like:

Code: Select all
function addTootip($col,$val,$row)
{
   $html ='<span title=" Your tootltip html">' . $val .'</span>';
        return $html;   
}


To add BS toottiip follow the examples here: http://www.w3schools.com/bootstrap/boot ... ooltip.asp
Have fun

KArel
KarelB
 
Posts: 458
Joined: Mon Dec 01, 2008 11:49 pm
Location: The Netherlands

Re: Jquery or bootstrap tooltip in Header

Postby hexxamillion » Fri Oct 30, 2015 4:26 pm

KarelB wrote:What i use is a very simple method that initially does not require jquery or bootstrap tooltip

Use the col_header_info option to set any long title.
Code: Select all
col_header_info' =>  'title="'My long description'"


This will show an eliminatory tooltip. If that is not sufficient you should be able to take it from here and add jQuery or BS tooltips.
Hope this helps

KArel


Right. This of course works but what I am having a problem with is that it seems like it doesn't recognize any jquery I try. If I apply outside of the mate code on the page it works as expected. Any suggestions on where I need to call the jquery for it to work?

Adding to the common.php does not seem to work.
hexxamillion
 
Posts: 100
Joined: Fri Jul 08, 2011 11:36 pm

Re: Jquery or bootstrap tooltip in Header

Postby hexxamillion » Fri Oct 30, 2015 4:59 pm

Oh...I just stumbled across hint.css which is purely css tooltip. No js needed to implement. Works like a charm.
from displayTableHtml section added the class="hint--bottom" to the td tag.


Code: Select all
   $html .= '<td '.$colHeaderInfo.' class="hint--bottom"><a href="javascript: void(0);" onclick="'.$this->instanceName.'.toAjaxTableEditor(\'order_by_changed\', new Array(\''.$col.'\',\''.$oppAscOrDesc.'\'),{updateHistory: true});">'.$info['display_text'].'</a> '.$arrow.'</td>';
     }
     else
     {
      $html .= '<td '.$colHeaderInfo.' class="hint--bottom"><a href="javascript: void(0);" onclick="'.$this->instanceName.'.toAjaxTableEditor(\'order_by_changed\', new Array(\''.$col.'\',\'asc\'),{updateHistory: true});"">'.$info['display_text'].'</a></td>';   
     }


then

for the col_header_info I replaced 'title' tag with 'data-hint'.

Example:

Code: Select all
'col_header_info' => 'data-hint="Select from drop down."'


I also had to modify the first section of css to postion:relative and also commented out display: inline-block. Works like a charm. The next version on MATE should include this as it implements nice simple tooltip without js and modifying much code logic.
hexxamillion
 
Posts: 100
Joined: Fri Jul 08, 2011 11:36 pm

Re: Jquery or bootstrap tooltip in Header

Postby hexxamillion » Fri Oct 30, 2015 9:08 pm

Here's a screenshot.

hintcss.jpg
hintcss.jpg (40.4 KiB) Viewed 21538 times
hexxamillion
 
Posts: 100
Joined: Fri Jul 08, 2011 11:36 pm


Return to Paid Version

Who is online

Users browsing this forum: No registered users and 1 guest

cron