+ Start a Discussion
Justin DenningJustin Denning 

Update jQuery tooltip on record update

I'm trying to create a data entry screen where users input costs in a foreign currency by region and month, and display the USD value as a tooltip when the user hovers over the field.  The code below works when the page loads, but it does not update the tooltip value when the user changes the input value.  How would I get it to update the tooltip when the input value is changed?
 
$(function createToolTips() {
        $( ".tool-tip" ).tooltip({  
            content:function(callback) {
            var usdValue = $(this).attr("tiptext"); 
            callback(usdValue);
        },
  })});

<apex:repeat value="{!RegionMap}" var="Region">
<apex:repeat value="{!CostsMap[Region]}" var="Month">
....
<td>         
   <div id="directTooltip"  class="tool-tip" tiptext="{!CostsMap[Region][Month].Costs__c*ExchangeRateMap[Region][Month].toUSD__c}">   
 <apex:inputText   style="width:125px;"   value="{!CostsMap[Region][Month].Costs__c}"                             
 
<apex:actionSupport event="onchange" action="{!updateValue}" reRender="directTooltip"  oncomplete="createToolTips();"  >
                  </apex:inputText> 
             </div>  
         </td>
   </apex:repeat>
</apex:repeat>

User-added image