In Excel or OpenOffice Calc, notes can be assigned to a cell. A red triangle is displayed in the upper right corner of the cell. When you click on it or hover your mouse, a small box pops up with the notes. Can such a function be done in KoolGrid?
- Bill in KC

Jquery can do the tooltip really nicely. You probably will need to use a custom column to get it right.

SOLUTION: As it turns out, Jquery is part of how I did it.
The data comes like this (not how I would have done it, but you work with what you've got):

12.5%<notes_nohighlight>Apps Approved:1/\nApps Sent: 8</notes_nohighlight>

Server-side code, using an array as a datasource (also note there is autosizing code, since I couldn't figure out how to autosize with a native property on the grid):

$fontWidth = imagefontwidth(3);
foreach($rs[0] as $k=>$v){
	$column = new GridBoundColumn();
	$column->DataField = $k; 
	$column->HeaderText = $k;
	$column->ReadOnly = true;
	$column->AllowHtmlRender = true;
	$column->AllowResizing = true;
	$curSize = $fontWidth * strlen($v); // get the approx width of the first value in the results
	if($curSize < 32){$curSize = 32;} // set a minimum width
	$column->Width = $curSize; // set the column width
	$grid->MasterTable->AddColumn($column);
}

Client-side code:

jQuery:
	$("notes_nohighlight").each(function(){
		var vParent = $(this).parent();
		vParent.attr("title", $(this).html());
		vParent.addClass("hasNotes");
		$(this).hide();
		
	}); 

Style:
.hasNotes {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AgdFiQgmr5rDQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAOklEQVQY033KoREAIBADwSsIg/gKmMFQAIL+68ibWCLWLYIh0A8AghmDU8XgtGJw2jE4nRicbgxOrwFPu0HZTKV00gAAAABJRU5ErkJggg=='); /* << 6px red triangle */
	background-repeat: no-repeat;
	background-position: top right; 
}

Hi Larry,
im trying to implement your idea, but i cant figure it out this part:

...
foreach($rs[0] as $k=>$v){
...

Can you explain in a little bit more detail how you did it?
Thank you,
Igor

Just simply add this script within the script tags in the top of your page and all tooltips are formatted better with jquery. They will popup without it though.
Also, your html tags need the tooltip property on them.
example: <input type="text" tooltip="Mandatory field requires input" value="somevalue">

$(function() {
          $( document ).tooltip(); 
        });   

As for the image, just place an image in the cell using a custom column. If there is a field property to determine when there is a tooltip, then use the grid eventhandler to add the image to the cell on the row prerender event.

Hi,
i solved this with tooltipster jQuery plugin.
php

	
        $column = new GridCustomColumn();
	$column->DataField  = '' ;
	$column->Valign     = 'middle';
	$column->HeaderText = 'Tooltip';
	$column->ItemTemplate = "<span class='tooltip' title='struja: {kategorijaStruja}, plin: {kategorijaPlin}'>{id_tvrtke}</span>";
	$column->Width      = '65px;';
	$grid->MasterTable->AddColumn($column);

<script>
  $(document).ready(function() {
            $('.tooltip').tooltipster();
			
			// $('.tooltip-left').tooltipster({
				theme: 'tooltipster-punk'
				// position: 'left',
				// trigger: 'click',
				// animation: 'swing'
				// animation: 'fade',
			        // delay: 200
				// maxWidth: 50,
				// contentAsHTML: true,
				// content: $('<span><img src="pictures/slika1.jpg" /></span>')
			// });			  
        });
<script>

Igor