Tool Tips - Different Styles?

Hi,
Had a browse through the Flex 2 docs but couldn't find
anything around this...
I'm able to style a tool tip through an external stylesheet
using
ToolTip
// style code here
Is it possible to define different styles for different tool
tips? Say you have 2 text fields on a form - could you have the
tool tip for the 1st text field say with orange text and the
tooltip for the 2nd text field have blue text?
Thanks in advance!

You can always roll your own. Just use a canvas, detect the
mouse events and use a timer if you need a delay before it shows.
Mouse events are nice cause you can have a follow tooltip that
moves with the mouse.

Similar Messages

  • Tool Tip style not getting affected

    Hi,
         This is the code i have in my style sheet
    ToolTip {
       backgroundColor: #330099;
       color: #ffffff;
    I have included in my source file.But its not getting affected in the list box tool tip.
    Thanks & Regards,
    Jayagopal P.S

    Use it like this, this works:
    private function setToolTipStyle():void {
         styleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("fontStyle","bold");    
         styleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("fontSize","12");
         styleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("fontFamily","Arial");
         styleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("color","#ED8805");
         styleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("backgroundColor","#FCFC FC");
         styleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("borderStyle","solid");
         styleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("paddingTop","2");
         styleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("paddingBottom","2");
    Cheers
    JanTheMan

  • How do I set a Unicode tool tip on an AVToolButton?

    We're finally porting our Acrobat (8/9/X/XI) plug-in to be fully Unicode-compliant, so that we can show our UI in Japanese and other languages which require double-byte characters.
    I've figured out how to rework most of our 8-bit calls, such as replacing AVMenuItemNew() with AVMenuItemNewWithASText(), AVAlert() with AVAlertWithParams(), etc.
    But I'm stuck on the tooltips for our toolbar buttons.  We had been calling AVToolButtonSetHelpText(), which takes an 8-bit char string.  But there's no ASText version of this function, as far as I can tell.
    I've tried calling both AVToolButtonSetComputeTooltipProc() and AVToolButtonSetNotifyTooltipProc(), but my callback functions never get called.  Similar callbacks registered with AVToolButtonSetComputeMarkedProc(), AVToolButtonSetComputeEnabledProc(), and AVToolButtonSetExecuteProc() work just fine, and I'm calling the AVToolButtonSet***TooltipProc functions the same way, but the tooltip callbacks never fire (at least not under Acrobat XI on Windows, which is my development environment).
    I'm not actually sure whether AVToolButtonSetComputeTooltipProc() or AVToolButtonSetNotifyTooltipProc() is what I need to do, or exactly what the difference between the two callbacks is.  Also, the documentation for AVNotifyTooltipProc says, "It returns text that is displayed in the tooltip," but AVNotifyTooltipProc is a declaration for a function returning void, so I'm not sure what the doc means by "It returns text."  The AVComputeTooltipProc callback seems more sensible, as it returns ASText, but like I said, I can't get either one to fire.  Although the doc for AVComputeTooltipProc is a bit confusing as well, as it says it's "used to get the mega-tooltip help text for a toolbar button."  What exactly does it mean by, "mega-tooltip?"  Is that a clue that a "mega" tooltip is somehow fundamentally different than a regular (non-"mega") tooltip?
    So, what exactly do I need to to in order to set Unicode tool tips on my toolbar buttons?

    Agreed, Unicode is the way to go.
    I would still appreciate it if someone could answer these specific questions:
    Is there any supported way to set Unicode tool tips in Acrobat 9?
    Why are my callbacks registered with AVToolButtonSetComputeTooltipProc() and AVToolButtonSetNotifyTooltipProc() never being called?  Do these functions simply not work?  Or am I doing something wrong?
    Thanks!

  • My custom Tool tip on spark data Grid don't work ?

    I want to add panel component as my tooltip for each row in my Spark DataGrid. So when mouse rollover the user can see the information for each the ship. I want a panel as my tooltip for dataGrid cause I want to organize my data neatly and also place a image in the panel.
    I came across :http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html  where they show an example of "Implementing the IToolTip interface" using the panel.I tried manipulating the codes but it didt work for my spark dataGrid.
    So my question :
    Can some one pls show me how I can use the Panel as my tool tip for each row in spark data grid.
    I have been struggling for quite some time.If possible pls Give me an example.
    This is my codes below (I tried to follow the example from :http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html#WS2d b454920e96a9e51e63e3d11c0bf60d65-7ff4 -"Implementing the IToolTip interface")
    My MXML Application codes :
        <fx:Script>
        <![CDATA[
            import DesignItemRenderer.PanelToolTip;
            import mx.events.ToolTipEvent;
            import mx.collections.ArrayCollection;         
            import mx.controls.Alert;  
            import spark.events.GridEvent; 
            [Bindable]
            private var myArrivalShips:ArrayCollection = new ArrayCollection([
                {arrivalShipsName:"Ship A", ETD:"12 March"},
                {arrivalShipsName:"Ship B", ETD:"25 March"}            
            private function createCustomTip(event:ToolTipEvent):void {
                var ptt:PanelToolTip = new PanelToolTip();
                ptt.title = "my Ship Info";
                ptt.bodyText = "my data for the ship";
                event.toolTip = ptt;
        ]]>
    </fx:Script>
    <s:BorderContainer x="267" y="11" width="331" height="586">
        <s:DataGrid id="arrivalTable" x="10" y="326" width="302" height="205" requestedRowCount="4" dataProvider="{myArrivalShips}" toolTipCreate="createCustomTip(event)">
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships" ></s:GridColumn>
                    <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>             
                </s:ArrayList>
            </s:columns>           
        </s:DataGrid>
        <s:BorderContainer x="10" y="19" width="302" height="285">
        </s:BorderContainer>
    </s:BorderContainer>
    My Custom Panel codes :
    <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
         implements="mx.core.IToolTip" >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var bodyText:String = "";
            //  Implement required methods of the IToolTip interface; these
            //  methods are not used in this example, though.
            public var _text:String;
            public function get text():String {
                return _text;
            public function set text(value:String):void {
        ]]>
    </fx:Script>
    <s:RichText text="{bodyText}" percentWidth="100"/>
    </s:Panel>

    Ok I was getting ready to post the renderer code and then found the problem. I had copied this code from another renderer which had contentBackgroundAlpha=0 in the MXAdvancedDataGridItemRenderer tag. When I removed it, the style of the TextArea worked as intended. Your comment helped me to take a closer look at the renderer code, so thank you.

  • Dynamic Values in Business Graphics Tool Tip

    hi,
    I am using business graphics ui element in my webdynpro application.I am able to get the graghical output correctly.I want to have tool tip in my graph so when I place the cursor on a point, the tool tip should give the corresponding value.I have used the following code
    try
         String[] catLabels = {
                        "Team 1", "\1Tomoko Akino", "\1Hans Bosch", "\1Marvin Smith",
                        "Team 2", "\1Jose Vega", "\1Bao Yin", "Out of office" };
            String[][] pointCustomizing = {
                        { "approved", "cancelled", "approvedPartTime" },
                        { "approved" },
                        { "approved" },
                        { "sent", "approvedPartTime", "notsentPartTime", "notsent"},
                        { "approved", "zSeveralEntries", "zSeveralEntries",
                          "zSeveralEntries", "zSeveralEntries", "zSeveralEntries",
                          "zSeveralEntries" },
                        { "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice" }
            String[][] pointLabels = {
                        { "1", "2", "2", "2", "4", "3", "3", "3", "1", "1", "2", "1",
                          "2", "1", "1" }
            String[][][] timeValues = {
                        { { "20020528", "20020606" }, { "20020606", "20020608" },
                          { "20020610", "20020611" } },
                        { { "20020531", "20020606" } },
                        { { "20020607", "20020613" } },
                        { { "20020527", "20020601" }, { "20020606", "20020607" },
                          { "20020612", "20020613" }, { "20020617", "20020619"} },
                        { { "20020531", "20020606" }, { "20020531", "20020601" },
                          { "20020601", "20020602" }, { "20020602", "20020603" },
                          { "20020603", "20020604" }, { "20020604", "20020605" },
                          { "20020605", "20020606" } },
                        { { "20020527", "20020528" }, { "20020528", "20020529" },
                          { "20020529", "20020530" }, { "20020530", "20020531" },
                          { "20020531", "20020601" }, { "20020603", "20020604" },
                          { "20020604", "20020605" }, { "20020605", "20020606" },
                          { "20020606", "20020607" }, { "20020607", "20020608" },
                          { "20020610", "20020611" }, { "20020611", "20020612" },
                          { "20020612", "20020613" }, { "20020617", "20020618" },
                          { "20020618", "20020619" }}
            String s[]={"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14",};
            IPrivateSBusinessGraphicsSampleView.ICategoryNode catNode = wdContext.nodeCategory();
            for (int catIndex = 0; catIndex < catLabels.length; ++catIndex)
               IPrivateSBusinessGraphicsSampleView.ICategoryElement  catElement = catNode.createCategoryElement();
               catNode.addElement(catElement);
               catElement.setDescription(catLabels[catIndex]);
            // loop over series
            IPrivateSBusinessGraphicsSampleView.ISeriesNode seriesNode = wdContext.nodeSeries();
            for (int seriesIndex = 0; seriesIndex < timeValues.length; ++seriesIndex)
               IPrivateSBusinessGraphicsSampleView.ISeriesElement seriesElement = seriesNode.createSeriesElement();
               seriesNode.addElement(seriesElement);
               // set series attributes (...)
               IPrivateSBusinessGraphicsSampleView.IPointNode pointNode = seriesElement.nodePoint();
               // loop over points
               for (int pointIndex = 0; pointIndex < timeValues[seriesIndex].length; ++pointIndex)
                 IPrivateSBusinessGraphicsSampleView.IPointElement
                           pointElement = pointNode.createPointElement();
                 pointNode.addElement(pointElement); 
                 String ename = s[pointIndex];
                 wdComponentAPI.getMessageManager().reportSuccess("name:"+ename);
                 pointElement.setStartValue(timeValues[seriesIndex][pointIndex][0]);
                 pointElement.setEndValue(timeValues[seriesIndex][pointIndex][1]);
                 pointElement.setCuId(pointCustomizing[seriesIndex][pointIndex]);
                 pointElement.setLabel(pointLabels[seriesIndex][pointIndex]);    
                 pointElement.setToolTip(ename );
         catch(Exception e)
                 wdComponentAPI.getMessageManager().reportSuccess("exc2:"+e);
    By the above code ,I am getting the tool tip with the value "a" in all locations.
    But I need to have different values in the tooltip corresponding to the location.
    Please Help....
    Thanks in advance,
    Shamila

    hi,
    Still  I did not get the dynamic tool tip..........
    In wdDoInit() I have written the following code
    try
         String[] catLabels = { "Team 1", "\1Tomoko Akino", "\1Hans Bosch", "\1Marvin Smith",
                   "Team 2", "\1Jose Vega", "\1Bao Yin", "Out of office" };
            String[][] pointCustomizing = {
                        { "approved", "cancelled", "approvedPartTime" },
                        { "approved" },
                        { "approved" },
                        { "sent", "approvedPartTime", "notsentPartTime", "notsent"},
                        { "approved", "zSeveralEntries", "zSeveralEntries",
                          "zSeveralEntries", "zSeveralEntries", "zSeveralEntries",
                          "zSeveralEntries" },
                        { "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice" }  };
                    String[][] pointLabels = {{ " ", " ", " " },{ " " },{ " " },{ " ", " ", " ", " "},{ " ", " ", " ", " ", " ", " ", " " },
                                  { "1", "2", "2", "2", "4", "3", "3", "3", "1", "1", "2", "1", "2", "1", "1" } };
                  String[][][] timeValues = {{        { "20020528", "20020606" },
                          { "20020606", "20020608" },
                          { "20020610", "20020611" } },
                        {  { "20020531", "20020606" } },
                        {   { "20020607", "20020613" }  },
                        {   { "20020527", "20020601" },
                          { "20020606", "20020607" },
                          { "20020612", "20020613" },
                          { "20020617", "20020619"} },
                        { { "20020531", "20020606" }, { "20020531", "20020601" },
                          { "20020601", "20020602" }, { "20020602", "20020603" },
                          { "20020603", "20020604" }, { "20020604", "20020605" },
                          { "20020605", "20020606" } },
                        { { "20020527", "20020528" }, { "20020528", "20020529" },
                          { "20020529", "20020530" }, { "20020530", "20020531" },
                          { "20020531", "20020601" }, { "20020603", "20020604" },
                          { "20020604", "20020605" }, { "20020605", "20020606" },
                          { "20020606", "20020607" }, { "20020607", "20020608" },
                          { "20020610", "20020611" }, { "20020611", "20020612" },
                          { "20020612", "20020613" }, { "20020617", "20020618" },
                          { "20020618", "20020619" }}  };
            String s[]={"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14",};
            IPrivateSBusinessGraphicsSampleView.ICategoryNode catNode = wdContext.nodeCategory();
            IPrivateSBusinessGraphicsSampleView.ICategoryElement  catElement;
            for (int catIndex = 0; catIndex < catLabels.length; ++catIndex)
                catElement = catNode.createCategoryElement();
               catNode.addElement(catElement);
               catElement.setDescription(catLabels[catIndex]);
             // loop over series
            IPrivateSBusinessGraphicsSampleView.ISeriesNode seriesNode = wdContext.nodeSeries();
            for (int seriesIndex = 0; seriesIndex < timeValues.length; ++seriesIndex)
               IPrivateSBusinessGraphicsSampleView.ISeriesElement seriesElement = seriesNode.createSeriesElement();
               seriesNode.addElement(seriesElement);
               // set series attributes (...)
               IPrivateSBusinessGraphicsSampleView.IPointNode pointNode = seriesElement.nodePoint();
               IPrivateSBusinessGraphicsSampleView.IPointElement  pointElement;
               // loop over points
               for (int pointIndex = 0; pointIndex < timeValues[seriesIndex].length; pointIndex++)
                 //IPrivateSBusinessGraphicsSampleView.IPointElement
                 pointElement = pointNode.createPointElement();
                 pointNode.addElement(pointElement); 
                 String ename = s[pointIndex];
                  wdComponentAPI.getMessageManager().reportSuccess("name:"+ename);
                 pointElement.setStartValue(timeValues[seriesIndex][pointIndex][0]);
                 pointElement.setEndValue(timeValues[seriesIndex][pointIndex][1]);
                 pointElement.setCuId(pointCustomizing[seriesIndex][pointIndex]);
                 pointElement.setLabel(pointLabels[seriesIndex][pointIndex]);    
                  pointElement.setToolTip(ename );
    catch(Exception e){        wdComponentAPI.getMessageManager().reportSuccess("exc2:"+e);    }
    In wdDoModifyView() I have written the following code
    try
         IWDBusinessGraphics graph = (IWDBusinessGraphics)view.getElement("BusinessGraphics");
         IWDAbstractSeries allSeries[] = graph.getSeriesList();
         IWDSimpleSeries series;
         wdThis.wdGetAPI().getComponent().getMessageManager().reportSuccess("length : "+allSeries.length+" value:"+allSeries[0]);
         for(int j=0;j<allSeries.length;j++)
           series = (IWDSimpleSeries)allSeries[j];
          for(int i=0;j<wdContext.nodeSeries().size();i++)
              wdContext.nodeSeries().setLeadSelection(i);
              series.setTooltip(series.getValue());
      catch(Exception e)
         wdThis.wdGetAPI().getComponent().getMessageManager().reportSuccess("exc modify :"+e);
    The node structure is
    Root Node
    >Category>Description
    >Series>Point-->CuId
    >Series>Point-->endvalue
    >Series>Point -->Startvalue
    >Series>Point -->label
    >Series>Point --->Tooltip
    In BusinessGraphis seriesSource-Series node ,tooltip-Series.Point.ToolTip is mapped
    In Category description-Category.Description is mapped
    In Series pointsource-Series.Point, tooltip-series.point.tooltip is mapped
    In Point CustomisingId-eries.point.cuId.label-Series.label, tooltip-series.point.Tooltip,valuesource -series.point is mapped
    In Numericvalue value-series.point.startvalue is mapped
    In Numericvalue value-series.point.endvalue is mapped
    When I deploy my application I am getting <b>java.lang.ClassCastException</b> Exception at the line  <b>series = (IWDSimpleSeries)allSeries[j];</b>
    What is reaseon?.....
    Please help..............
    I want to get dynamic value in the tool tip of the graph.
    Thanks in advance,
    Shamila,

  • Spry tool tip does not work in template or child pages within an editable region. Why not?

    Ok. so I am getting pretty frustrated. I take the time to learn how to use CSS and to create a template page for a Contractor Site (www.ContractorInsurance.net). The idea is to create a page that I can use for different classes of Contractors...right?
    Then I get all happy about being able to insert ToolTip onto pages to help the user. Great!
    LIfe to turn to Sorrow after nearly five hours of searching for a "eeking" answer.
    So what good does it do to have an Editable region to update if we cannot have the flexibility to insert a tool tip on child pages?  Ok so the fast solution is to what... Have a question mark image, insert another apDiv, name it toolTip_Not and provide it with a show=hide behavior?
    RRRRRrrr...
    This really sucks not being able to find a solution within a reasonable amount of time.

    I have tried thank you. However...it is still not working.
    www.ContractorInsurance.net/course_of_construction.php
    The error message is "Making this change would require code that is locked by a template translator"
        Re: Spry tool tip does not work in template or child pages within an editable region. Why not?
        created by altruistic gramps in Spry Framework for Ajax - View the full discussion
    If you have a look at the following simple document with a tooltipTooltip trigger goes here.
    Tooltip content goes here.
    you will notice that a couple of lines have been placed in the HEAD section of the document. When using DW templates, the HEAD section is usually not editable, hence the error mesaage. By default, your template should have an editable region in it just before the closing tag. It looks like this: <!-- TemplateBeginEditable name="head" > <! TemplateEndEditable --> Dreamweaver should be able to find that editable region and insert the
    <script> tag there automatically. Because you don't have an editable region like that in the <head>, open the master template, and paste the code above just before the closing </head>
    tag. Gramps
    Edited to remove personal data

  • Tool tip to not move

    Hi I'm a big fan. long time lurker first time poster
    Currently the position of the tool tip depends on where the cursor first hovers over the image.  Is there a way for the tool tip to appear in the same place no mater where the image is hovered?
    below is the js and css
    thanks
    // SpryTooltip.js - version 0.9 - Spry 1.6.1
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.BrowserSniff = function()
    var b = navigator.appName.toString();
    var up = navigator.platform.toString();
    var ua = navigator.userAgent.toString();
    this.mozilla = this.ie = this.opera = this.safari = false;
    var re_opera = /Opera.([0-9\.]*)/i;
    var re_msie = /MSIE.([0-9\.]*)/i;
    var re_gecko = /gecko/i;
    var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
    var r = false;
    if ( (r = ua.match(re_opera))) {
    this.opera = true;
    this.version = parseFloat(r[1]);
    } else if ( (r = ua.match(re_msie))) {
    this.ie = true;
    this.version = parseFloat(r[1]);
    } else if ( (r = ua.match(re_safari))) {
    this.safari = true;
    if(parseFloat(r[2]) < 420)
    this.version = 2;
    else
    this.version = 3;
    } else if (ua.match(re_gecko)) {
    var re_gecko_version = /rv:\s*([0-9\.]+)/i;
    r = ua.match(re_gecko_version);
    this.mozilla = true;
    this.version = parseFloat(r[1]);
    this.windows = this.mac = this.linux = false;
    this.Platform = ua.match(/windows/i) ? "windows" :
    (ua.match(/linux/i) ? "linux" :
    (ua.match(/mac/i) ? "mac" :
    ua.match(/unix/i)? "unix" : "unknown"));
    this[this.Platform] = true;
    this.v = this.version;
    if (this.safari && this.mac && this.mozilla) {
    this.mozilla = false;
    Spry.is = new Spry.Widget.BrowserSniff();
    Spry.Widget.Tooltip = function(tooltip_element, trigger_selector, options)
    options = Spry.Widget.Utils.firstValid(options, {});
    this.init(trigger_selector, tooltip_element, options);
    if (Spry.Widget.Tooltip.onloadDidFire)
    this.attachBehaviors();
    Spry.Widget.Tooltip.loadQueue.push(this);
    Spry.Widget.Tooltip.prototype.init = function(trigger_element, tooltip_element, options)
    var Utils = Spry.Widget.Utils;
    this.triggerElements = Utils.getElementsByClassName(trigger_element);
    this.tooltipElement = Utils.getElement(tooltip_element);
    options.showDelay = parseInt(Utils.firstValid(options.showDelay, 0), 10);
    options.hideDelay = parseInt(Utils.firstValid(options.hideDelay, 0), 10);
    if (typeof this.triggerElements == 'undefined' || !(this.triggerElements.length > 0))
    this.showError('The element(s) "' + trigger_element + '" do not exist in the page');
    return false;
    if (typeof this.tooltipElement == 'undefined' || !this.tooltipElement)
    this.showError('The element "' + tooltip_element + '" do not exists in the page');
    return false;
    this.listenersAttached = false;
    this.hoverClass = "";
    this.followMouse = false;
    this.offsetX = 15;
    this.offsetY = 15;
    this.closeOnTooltipLeave = false;
    this.useEffect = false;
    Utils.setOptions(this, options);
    this.animator = null;
    for (var i =0; i < this.triggerElements.length; i++)
    if (!this.triggerElements[i].className)
    this.triggerElements[i].className = '';
    if (this.useEffect){
    switch (this.useEffect.toString().toLowerCase()){
    case 'blind': this.useEffect = 'Blind'; break;
    case 'fade': this.useEffect = 'Fade'; break;
    default:
    this.useEffect = false;
    this.visibleTooltip = false;
    // Hack for FF 3 - Safari 3: force painting of the element, in order to have the correct display
    this.tooltipElement.offsetHeight;
    // Optimisation: save browser work if display is already 'none'
    if (Spry.Widget.Utils.getStyleProperty(this.tooltipElement, 'display') != 'none')
    this.tooltipElement.style.display = 'none';
    if (typeof this.offsetX != 'numeric')
    this.offsetX = parseInt(this.offsetX, 10);
    if (isNaN(this.offsetX))
    this.offsetX = 0;
    if (typeof this.offsetY != 'numeric')
    this.offsetY = parseInt(this.offsetY, 10);
    if (isNaN(this.offsetY))
    this.offsetY = 0;
    this.tooltipElement.style.position = 'absolute';
    this.tooltipElement.style.top = '0px';
    this.tooltipElement.style.left = '0px';
    Spry.Widget.Tooltip.onloadDidFire = false;
    Spry.Widget.Tooltip.loadQueue = [];
    Spry.Widget.Tooltip.addLoadListener = function(handler)
    if (typeof window.addEventListener != 'undefined')
    window.addEventListener('load', handler, false);
    else if (typeof document.addEventListener != 'undefined')
    document.addEventListener('load', handler, false);
    else if (typeof window.attachEvent != 'undefined')
    window.attachEvent('onload', handler);
    Spry.Widget.Tooltip.processLoadQueue = function(handler)
    Spry.Widget.Tooltip.onloadDidFire = true;
    var q = Spry.Widget.Tooltip.loadQueue;
    var qlen = q.length;
    for (var i = 0; i < qlen; i++)
    if (!q[i].listenersAttached)
    q[i].attachBehaviors();
    Spry.Widget.Tooltip.addLoadListener(Spry.Widget.Tooltip.processLoadQueue);
    Spry.Widget.Tooltip.prototype.addClassName = function(ele, className)
    if (!ele || !className)
    return;
    if (ele.className.indexOf(className) == -1)
    ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.Tooltip.prototype.removeClassName = function(ele, className)
    if (!ele || !className )
    return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.Tooltip.prototype.showTooltip = function()
    if (!this.visibleTooltip)
    this.tooltipElement.style.visibility = 'hidden';
    this.tooltipElement.style.zIndex = '9999';
    this.tooltipElement.style.display = 'block';
    Spry.Widget.Utils.putElementAt(this.tooltipElement, this.pos, {x:this.offsetX, y:this.offsetY}, true);
    if(Spry.is.ie && Spry.is.version == '6')
    this.createIframeLayer(this.tooltipElement);
    if (!this.visibleTooltip)
    if (this.useEffect)
    if (typeof this.showEffect == 'undefined')
    this.showEffect = new Spry.Widget.Tooltip[this.useEffect](this.tooltipElement, {from: 0, to: 1});
    this.showEffect.start();
    else
    this.tooltipElement.style.visibility = 'visible';
    this.visibleTooltip = true;
    Spry.Widget.Tooltip.prototype.hideTooltip = function(quick)
    if (this.useEffect && !quick)
    if (typeof this.hideEffect == 'undefined')
    this.hideEffect = new Spry.Widget.Tooltip[this.useEffect](this.tooltipElement, {from: 1, to: 0});
    this.hideEffect.start();
    else
    if (typeof this.showEffect != 'undefined')
    this.showEffect.stop();
    this.tooltipElement.style.display = 'none';
    if(Spry.is.ie && Spry.is.version == '6')
    this.removeIframeLayer(this.tooltipElement);
    if (this.hoverClass && !this.hideTimer)
    for (var i = 0; i < this.triggerElements.length; i++)
    this.removeClassName(this.triggerElements[i], this.hoverClass);
    this.visibleTooltip = false;
    Spry.Widget.Tooltip.prototype.displayTooltip = function(show) {
    if (this.tooltipElement)
    if (this.hoverClass){
    for (var i = 0; i < this.triggerElements.length; i++)
    this.removeClassName(this.triggerElements[i], this.hoverClass);
    if (show)
    if (this.hideTimer)
    clearInterval(this.hideTimer);
    delete(this.hideTimer);
    if (this.hoverClass)
    if (typeof this.triggerHighlight != 'undefined')
    this.addClassName(this.triggerHighlight, this.hoverClass);
    var self = this;
    this.showTimer = setTimeout(function(){self.showTooltip()}, this.showDelay);
    else
    if (this.showTimer)
    clearInterval(this.showTimer);
    delete(this.showTimer);
    var self = this;
    this.hideTimer = setTimeout(function(){self.hideTooltip();}, this.hideDelay);
    this.refreshTimeout();
    Spry.Widget.Tooltip.prototype.onMouseOverTrigger = function(e)
    var target = '';
    if (Spry.is.ie)
    target = e.srcElement;
    else
    target = e.target;
    var contains = Spry.Widget.Utils.contains;
    for (var i = 0; i < this.triggerElements.length; i++)
    if (contains(this.triggerElements[i], target))
    target = this.triggerElements[i];
    break;
    if (i == this.triggerElements.length) return;
    if (this.visibleTooltip && this.triggerHighlight && this.triggerHighlight == target)
    if (this.hideTimer)
    clearInterval(this.hideTimer);
    delete(this.hideTimer);
    if (this.hoverClass)
    if (typeof this.triggerHighlight != 'undefined')
    this.addClassName(this.triggerHighlight, this.hoverClass);
    return;
    var pos = Spry.Widget.Utils.getAbsoluteMousePosition(e);
    this.pos = {x: pos.x + this.offsetX, y: pos.y + this.offsetY};
    this.triggerHighlight = target;
    Spry.Widget.Tooltip.closeAll();
    this.displayTooltip(true);
    Spry.Widget.Tooltip.prototype.onMouseMoveTrigger = function(e)
    var pos = Spry.Widget.Utils.getAbsoluteMousePosition(e);
    this.pos = {x: pos.x + this.offsetX, y: pos.y + this.offsetY};
    if (this.visibleTooltip)
    this.showTooltip();
    Spry.Widget.Tooltip.prototype.onMouseOutTrigger = function(e)
    var target = '';
    if (Spry.is.ie)
    target = e.toElement;
    else
    target = e.relatedTarget;
    var contains = Spry.Widget.Utils.contains;
    for (var i=0; i < this.triggerElements.length; i++)
    if (contains(this.triggerElements[i], target))
    return;
    this.displayTooltip(false);
    Spry.Widget.Tooltip.prototype.onMouseOutTooltip = function(e)
    var target = '';
    if (Spry.is.ie)
    target = e.toElement;
    else
    target = e.relatedTarget;
    var contains = Spry.Widget.Utils.contains;
    if (contains(this.tooltipElement, target))
    return;
    this.displayTooltip(false);
    Spry.Widget.Tooltip.prototype.onMouseOverTooltip = function(e)
    if (this.hideTimer)
    clearInterval(this.hideTimer);
    delete(this.hideTimer);
    if (this.hoverClass)
    if (typeof this.triggerHighlight != 'undefined')
    this.addClassName(this.triggerHighlight, this.hoverClass);
    Spry.Widget.Tooltip.prototype.refreshTimeout = function()
    if (Spry.Widget.Tooltip.refreshTimeout != null)
    clearTimeout(Spry.Widget.Tooltip.refreshTimeout);
    Spry.Widget.Tooltip.refreshTimeout = null;
    Spry.Widget.Tooltip.refreshTimeout = setTimeout(Spry.Widget.Tooltip.refreshAll, 100);
    Spry.Widget.Tooltip.prototype.destroy = function()
    for (var k in this)
    try{
    if (typeof this.k == 'object' && typeof this.k.destroy == 'function') this.k.destroy();
    delete this.k;
    }catch(err){}
    Spry.Widget.Tooltip.prototype.checkDestroyed = function()
    // checks the parent node. If it exists, then the element is still in the DOM
    if (!this.tooltipElement || this.tooltipElement.parentNode == null)
    return true;
    return false;
    Spry.Widget.Tooltip.prototype.attachBehaviors = function()
    var self = this;
    var ev = Spry.Widget.Utils.addEventListener;
    for (var i=0; i< this.triggerElements.length; i++)
    ev(this.triggerElements[i], 'mouseover', function(e) {self.onMouseOverTrigger(e || event); return true;}, false);
    ev(this.triggerElements[i], 'mouseout', function(e) {self.onMouseOutTrigger(e || event); return true;}, false);
    if (this.followMouse)
    ev(this.triggerElements[i], 'mousemove', function(e) {self.onMouseMoveTrigger(e || event); return true;}, false);
    if (this.closeOnTooltipLeave)
    ev(this.tooltipElement, 'mouseover', function(e){self.onMouseOverTooltip(e || event); return true;}, false);
    ev(this.tooltipElement, 'mouseout', function(e){self.onMouseOutTooltip(e || event); return true;}, false);
    this.listenersAttached = true;
    // createIframeLayer for Tooltip
    // creates an IFRAME underneath a tooltip element so that it will show above form controls and ActiveX
    Spry.Widget.Tooltip.prototype.createIframeLayer = function(tooltip)
    if (typeof this.iframeLayer == 'undefined')
    var layer = document.createElement('iframe');
    layer.tabIndex = '-1';
    layer.src = 'javascript:"";';
    layer.scrolling = 'no';
    layer.frameBorder = '0';
    layer.className = 'iframeTooltip';
    tooltip.parentNode.appendChild(layer);
    this.iframeLayer = layer;
    this.iframeLayer.style.left = tooltip.offsetLeft + 'px';
    this.iframeLayer.style.top = tooltip.offsetTop + 'px';
    this.iframeLayer.style.width = tooltip.offsetWidth + 'px';
    this.iframeLayer.style.height = tooltip.offsetHeight + 'px';
    this.iframeLayer.style.display = 'block';
    // removeIframeLayer for Tooltip Element
    // removes an IFRAME underneath a tooltip to reveal any form controls and ActiveX
    Spry.Widget.Tooltip.prototype.removeIframeLayer =  function(tooltip)
    if (this.iframeLayer)
    this.iframeLayer.style.display = 'none';
    Spry.Widget.Tooltip.prototype.showError = function(msg)
    alert('Spry.Widget.Tooltip ERR: ' + msg);
    Spry.Widget.Tooltip.refreshAll = function()
    var q = Spry.Widget.Tooltip.loadQueue;
    var qlen = q.length;
    for (var i = 0; i < qlen ; i++)
    if (q[i].checkDestroyed())
    // the trigger element is no longer in the dom, we should remove the current widget.
    q[i].destroy();
    q.splice(i, 1);
    i--;
    qlen = q.length;
    Spry.Widget.Tooltip.closeAll = function()
    var q = Spry.Widget.Tooltip.loadQueue;
    var qlen = q.length;
    for (var i = 0; i < qlen ; i++)
    if (q[i].visibleTooltip)
    q[i].hideTooltip(true);
    if (q[i].showTimer)
    clearTimeout(q[i].showTimer);
    if (q[i].hideTimer)
    clearTimeout(q[i].hideTimer);
    Spry.Widget.Tooltip.Animator = function(element, opts)
    this.timer = null;
    this.fps = 60;
    this.duration = 500;
    this.startTime = 0;
    this.transition = Spry.Widget.Tooltip.Animator.defaultTransition;
    this.onComplete = null;
    if (typeof element == 'undefined') return;
    this.element = Spry.Widget.Utils.getElement(element);
    Spry.Widget.Utils.setOptions(this, opts, true);
    this.interval = this.duration / this.fps;
    Spry.Widget.Tooltip.Animator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
    Spry.Widget.Tooltip.Animator.prototype.start = function()
    var self = this;
    this.startTime = (new Date).getTime();
    this.beforeStart();
    this.timer = setInterval(function() { self.stepAnimation(); }, this.interval);
    Spry.Widget.Tooltip.Animator.prototype.stop = function()
    if (this.timer)
    clearTimeout(this.timer);
    this.timer = null;
    Spry.Widget.Tooltip.Animator.prototype.stepAnimation = function(){};
    Spry.Widget.Tooltip.Animator.prototype.beforeStart = function(){};
    Spry.Widget.Tooltip.Animator.prototype.destroy = function()
    for (var k in this)
    try
    delete this.k;
    }catch(err){}
    Spry.Widget.Tooltip.Fade = function(element, opts)
    Spry.Widget.Tooltip.Animator.call(this, element, opts);
    if (Spry.is.ie)
    this.origOpacity = this.element.style.filter;
    else
    this.origOpacity = this.element.style.opacity;
    Spry.Widget.Tooltip.Fade.prototype = new Spry.Widget.Tooltip.Animator();
    Spry.Widget.Tooltip.Fade.prototype.constructor = Spry.Widget.Tooltip.Fade;
    Spry.Widget.Tooltip.Fade.prototype.stepAnimation = function()
    var curTime = (new Date).getTime();
    var elapsedTime = curTime - this.startTime;
    var i, obj;
    if (elapsedTime >= this.duration)
    this.beforeStop();
    this.stop();
    return;
    var ht = this.transition(elapsedTime, this.from, this.to - this.from, this.duration);
    if (Spry.is.ie)
    var filter = this.element.style.filter.replace(/alpha\s*\(\s*opacity\s*=\s*[0-9\.]{1,3}\)/, '');
    this.element.style.filter = filter + 'alpha(opacity=' + parseInt(ht * 100, 10) + ')';
    else
    this.element.style.opacity = ht;
    this.element.style.visibility = 'visible';
    this.element.style.display = 'block';
    Spry.Widget.Tooltip.Fade.prototype.beforeStop = function()
    if (this.from > this.to)
    this.element.style.display = 'none';
    if (Spry.is.mozilla)
    this.element.style.filter = this.origOpacity;
    else
    this.element.style.opacity = this.origOpacity;
    Spry.Widget.Tooltip.Blind = function(element, opts)
    this.from = 0;
    this.to = 100;
    Spry.Widget.Tooltip.Animator.call(this, element, opts);
    this.element.style.visibility = 'hidden';
    this.element.style.display = 'block';
    this.origHeight = parseInt(Spry.Widget.Utils.getStyleProperty(this.element, 'height'),10);
    if (isNaN(this.origHeight))
    this.origHeight = this.element.offsetHeight;
    if (this.to == 0)
    this.from = this.origHeight;
    else
    this.to = this.origHeight;
    Spry.Widget.Tooltip.Blind.prototype = new Spry.Widget.Tooltip.Animator();
    Spry.Widget.Tooltip.Blind.prototype.constructor = Spry.Widget.Tooltip.Blind;
    Spry.Widget.Tooltip.Blind.prototype.beforeStart = function()
    this.origOverflow = Spry.Widget.Utils.getStyleProperty(this.element, 'overflow');
    this.element.style.overflow = 'hidden';
    Spry.Widget.Tooltip.Blind.prototype.stepAnimation = function()
    var curTime = (new Date).getTime();
    var elapsedTime = curTime - this.startTime;
    var i, obj;
    if (elapsedTime >= this.duration)
    this.beforeStop();
    this.stop();
    return;
    var ht = this.transition(elapsedTime, this.from, this.to - this.from, this.duration);
    this.element.style.height = Math.floor(ht) + 'px';
    this.element.style.visibility = 'visible';
    this.element.style.display = 'block';
    Spry.Widget.Tooltip.Blind.prototype.beforeStop = function()
    this.element.style.overflow = this.origOverflow;
    if (this.from > this.to)
    this.element.style.display = 'none';
    this.element.style.height = this.origHeight + 'px';
    // Spry.Widget.Utils
    if (!Spry.Widget.Utils) Spry.Widget.Utils = {};
    Spry.Widget.Utils.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
    return;
    for (var optionName in optionsObj)
    if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
    continue;
    obj[optionName] = optionsObj[optionName];
    Spry.Widget.Utils.getElement = function(ele)
    if (ele && typeof ele == "string")
    return document.getElementById(ele);
    return ele;
    Spry.Widget.Utils.getElementsByClassName = function(sel)
    if (!sel.length > 0)
    return null;
    var selectors = sel.split(',');
    var el = [];
    for (var i =0; i < selectors.length; i++)
    var cs = selectors[i];
    var chunk = cs.split(' ');
    var parents = [];
    parents[0] = [];
    parents[0][0] = document.body;
    for (var j = 0; j < chunk.length; j++)
    var tokens = Spry.Widget.Utils.getSelectorTokens(chunk[j]);
    for (var k =0; k < parents[j].length; k++)
    var childs = parents[j][k].getElementsByTagName('*');
    parents[j+1] = [];
    for (var l=0; l < childs.length; l++)
    if (Spry.Widget.Utils.hasSelector(childs[l], tokens))
    parents[j+1].push(childs[l]);
    if (parents[j])
    for (var k = 0; k < parents[j].length; k++)
    el.push(parents[j][k]);
    return el;
    Spry.Widget.Utils.firstValid = function()
    var ret = null;
    var a = Spry.Widget.Utils.firstValid;
    for(var i=0; i< a.arguments.length; i++)
    if (typeof(a.arguments[i]) != 'undefined')
    ret = a.arguments[i];
    break;
    return ret;
    Spry.Widget.Utils.getSelectorTokens = function(str)
    str = str.replace(/\./g, ' .');
    str = str.replace(/\#/g, ' #');
    str = str.replace(/^\s+|\s+$/g,"");
    return str.split(' ');
    Spry.Widget.Utils.hasSelector = function(el, tokens)
    for (var i =0; i< tokens.length; i++)
    switch (tokens[i].charAt(0))
    case '.': if (!el.className || el.className.indexOf(tokens[i].substr(1)) == -1) return false; break;
    case '#': if (!el.id || el.id != tokens[i].substr(1)) return false; break;
    default: if (el.nodeName.toLowerCase != tokens[i]) return false; break;
    return true;
    Spry.Widget.Utils.addEventListener = function(element, eventType, handler, capture)
    try
    if (element.addEventListener)
    element.addEventListener(eventType, handler, capture);
    else if (element.attachEvent)
    element.attachEvent("on" + eventType, handler);
    catch (e) {}
    Spry.Widget.Utils.getStyleProperty = function(element, prop)
    var value;
    var camelized = Spry.Widget.Utils.camelize(prop);
    try
    if (element.style)
    value = element.style[camelized];
    if (!value)
    if (document.defaultView && document.defaultView.getComputedStyle)
    var css = document.defaultView.getComputedStyle(element, null);
    value = css ? css.getPropertyValue(prop) : null;
    else if (element.currentStyle)
    value = element.currentStyle[camelized];
    catch (e) {}
    return value == 'auto' ? null : value;
    Spry.Widget.Utils.camelize = function(str)
    if (str.indexOf('-') == -1)
    return str;
    var oStringList = str.split('-');
    var isFirstEntry = true;
    var camelizedString = '';
    for(var i=0; i < oStringList.length; i++)
    if(oStringList[i].length>0)
    if(isFirstEntry)
    camelizedString = oStringList[i];
    isFirstEntry = false;
    else
    var s = oStringList[i];
    camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
    return camelizedString;
    * Spry.Widget.Utils.getPixels
    * returns the value of a CSS property as Int, converting medium to 2
    * @param {DOMElement} m - elements
    * @param {String} s -
    Spry.Widget.Utils.getPixels = function (m, s)
    var v = Spry.Widget.Utils.getStyleProperty(m, s);
    if (v == "medium") {
    v = 2;
    } else {
    v = parseInt(v, 10);
    v = isNaN(v)?0:v;
    return v;
    Spry.Widget.Utils.getAbsoluteMousePosition = function(ev)
    var pos = {x:0, y:0};
    if (ev.pageX)
    pos.x = ev.pageX;
    else if (ev.clientX)
    pos.x = ev.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    if (isNaN(pos.x)) pos.x = 0;
    if (ev.pageY)
    pos.y = ev.pageY;
    else if (ev.clientY)
    pos.y = ev.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    if (isNaN(pos.y)) pos.y = 0;
    return pos;
    * Spry.Widget.Utils.getBorderBox
    * returns a border box object (x,y,width,height) which perfectly covers the el element and its borders
    * the x, y are absolute coordinates measured from from the window viewport
    * use the box as the second parameter in Spry.Widget.Utils.setBorderBox
    * @param {DOMElement or String} el -
    * @param {DOMDocument,optional} doc -
    Spry.Widget.Utils.getBorderBox = function (el, doc)
    doc = doc || document;
    if (typeof el == 'string')
    el = doc.getElementById(el);
    if (!el)
    return false;
    if (el.parentNode === null || Spry.Widget.Utils.getStyleProperty(el, 'display') == 'none')
    //element must be visible to have a box
    return false;
    var ret = {x:0, y:0, width:0, height:0};
    var parent = null;
    var box;
    if (el.getBoundingClientRect) { // IE
    box = el.getBoundingClientRect();
    var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
    var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
    ret.x = box.left + scrollLeft;
    ret.y = box.top + scrollTop;
    ret.width = box.right - box.left;
    ret.height = box.bottom - box.top;
    } else if (doc.getBoxObjectFor) { // gecko
    box = doc.getBoxObjectFor(el);
    ret.x = box.x;
    ret.y = box.y;
    ret.width = box.width;
    ret.height = box.height;
    var btw = Spry.Widget.Utils.getPixels(el, "border-top-width");
    var blw = Spry.Widget.Utils.getPixels(el, "border-left-width");
    ret.x -= blw;
    ret.y -= btw;
    } else { // safari/opera
    ret.x = el.offsetLeft;
    ret.y = el.offsetTop;
    ret.width = el.offsetWidth;
    ret.height = el.offsetHeight;
    parent = el.offsetParent;
    if (parent != el)
    while (parent)
    ret.x += parent.offsetLeft;
    ret.y += parent.offsetTop;
    parent = parent.offsetParent;
    var blw = Spry.Widget.Utils.getPixels(el, "border-left-width");
    var btw = Spry.Widget.Utils.getPixels(el, "border-top-width");
    ret.x -= blw;
    ret.y -= btw;
    // opera & (safari absolute) incorrectly account for body offsetTop
    var ua = navigator.userAgent.toLowerCase();
    if (Spry.is.opera || Spry.is.safari && Spry.Widget.Utils.getStyleProperty(el, 'position') == 'absolute')
    ret.y -= doc.body.offsetTop;
    if (el.parentNode)
    parent = el.parentNode;
    else
    parent = null;
    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
    ret.x -= (isNaN(parent.scrollLeft) ? 0 : parent.scrollLeft);
    ret.y -= (isNaN(parent.scrollTop)  ? 0 : parent.scrollTop);
    if (parent.parentNode)
    parent = parent.parentNode;
    else
    parent = null;
    return ret;
    * Spry.Widget.Utils.setBorderBox
    * puts the element el to the location specified by box
    * @param {DOMElement} el - the element to be placed
    * @param {Object} box - hash containing the x and y coordinates where to put el
    Spry.Widget.Utils.setBorderBox = function (el, box) {
    var pos = Spry.Widget.Utils.getBorderBox(el, el.ownerDocument);
    if (pos === false)
    return false;
    var delta = {
    x:Spry.Widget.Utils.getPixels(el, 'left'),
    y:Spry.Widget.Utils.getPixels(el, 'top')
    var new_pos = {x:0, y:0, w:0, h:0};
    if (typeof box.x == 'number') {
    new_pos.x = box.x - pos.x + delta.x;
    if (typeof box.y == 'number') {
    new_pos.y = box.y - pos.y + delta.y;
    if (typeof box.x == 'number') {
    el.style.left = new_pos.x + 'px';
    if (typeof box.y == 'number') {
    el.style.top = new_pos.y + 'px';
    return true;
    Spry.Widget.Utils.putElementAt = function (source, target, offset, biv)
    biv = Spry.Widget.Utils.firstValid(biv, true);
    var source_box = Spry.Widget.Utils.getBorderBox(source, source.ownerDocument);
    Spry.Widget.Utils.setBorderBox(source, target);
    if (biv)
    Spry.Widget.Utils.bringIntoView(source);
    return true;
    * Spry.Widget.Utils.bringIntoView
    * set the position of the source element so it is completely visible in the window
    * @param {DOMElemenet} source - the element to be
    Spry.Widget.Utils.bringIntoView = function (source) {
    var box = Spry.Widget.Utils.getBorderBox(source, source.ownerDocument);
    if (box === false) {
    return false;
    var current = {
    x:Spry.Widget.Utils.getPixels(source, 'left'),
    y:Spry.Widget.Utils.getPixels(source, 'top')
    var delta = {x:0, y:0};
    var offset_fix = {x:0, y:0};
    var strictm = source.ownerDocument.compatMode == "CSS1Compat";
    var doc = (Spry.is.ie && strictm || Spry.is.mozilla)?source.ownerDocument.documentElement:source.ownerDocument.body;
    offset_fix.x = Spry.Widget.Utils.getPixels(doc, 'border-left-width');
    offset_fix.y = Spry.Widget.Utils.getPixels(doc, 'border-top-width');
    var st = doc.scrollTop;
    var ch = self.innerHeight ? self.innerHeight : doc.clientHeight;
    var t = box.y + (Spry.is.ie?-offset_fix.y:offset_fix.y);
    var b = box.y + box.height + (Spry.is.ie?-offset_fix.y:offset_fix.y);
    if ( b - st > ch) {
    delta.y = ch - (b - st);
    if (t + delta.y < st) {
    delta.y = st-t;
    } else if (t < st) {
    delta.y = st - t;
    if (delta.y != 0) {
    source.style.top = (current.y + delta.y) + 'px';
    var sl = doc.scrollLeft;
    var cw = doc.clientWidth;
    var l = box.x + (Spry.is.ie?-offset_fix.x:offset_fix.x);
    var r = box.x + box.width + (Spry.is.ie?-offset_fix.x:offset_fix.x);
    if ( r - sl > cw) {
    delta.x = cw - (r - sl);
    if (l + delta.x < sl) {
    delta.x = sl-l;
    } else if (l < sl) {
    delta.x = sl - l;
    if (delta.x != 0) {
    source.style.left = (current.x + delta.x) + 'px';
    Spry.Widget.Utils.contains = function (who, what) {
    if (typeof who.contains == 'object') {
    return what && who && (who == what || who.contains(what));
    } else {
    var el = what;
    while(el) {
    try{
    if (el == who) {
    return true;
    el = el.parentNode;
    }catch(a){return false;}
    return false;
    })(); // EndSpryComponent
    @charset "UTF-8";
    /* SpryTooltip.css - version 0.2 - Spry 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* HACK FOR IE: to make sure the tooltips show above form controls, we underlay each tooltip with an iframe */
    .iframeTooltip
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    .tooltipContent
    font-size: 11px;
    font-style: italic;
    color: #332c40;
    width: 96px;
    height: 51px;
    background: url(../_images/recipe/bubble2.png) no-repeat;
    font-family: "Comic Sans MS", cursive;
    margin: 0px;
    left: -200px;
    top: -200px;
    padding-top: 5px;
    vertical-align: middle;
    position: fixed;

    I couldn't get this script to work with my code:
    <a id="greensource" href="a"><img src="images/greensource.png" alt="Greensource Initiative" width="193" height="71" border="0" usemap="#Map7" id="sprytrigger6" title="Greensource Initiative" />
    <map name="Map7" id="Map7">
    <area shape="rect" coords="-22,-15,197,79" href="#" />
    </map>
    </a>
    <div class="tooltipContent" id="green">
    <div class="secondback">
    <div style="padding: 15px;">
    <h1>GREENSOURCE</h1>
    <h2>INITIATIVE&#8482;</h2>
    <p>Manufactred within Greensource Initiative&#8482; guildelines for use of recycled materials, renewable energy and non-hazardous packaging materials. RoHS Compliant.</p>
    <p class="morebutton"><a href="#">LEARN MORE</a></p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var sprytooltip7 = new Spry.Widget.Tooltip("green", "#greensource");
    //-->
    </script>
    Maybe someone can point out my problem?
    CSS:
    .tooltipContent
        margin: 0;
        padding: 0;
        background: #FFF url(../images/bottom-gradient.png) repeat-x bottom left;
        font-family: "Myriad Pro", Tahoma, Geneva, sans-serif;
        text-align: left;
        box-shadow: 2px 2px 4px #b6b5b6;
        -webkit-box-shadow: 2px 2px 4px #b6b5b6;
        -moz-box-shadow: 2px 2px 4px #b6b5b6;
        position: fixed;
    #green {
        position: absolute;
        border: none;
        top: 200px;
        left: 200px;

  • Tool Tip with column Height in CL_GUI_CHART_ENGINE

    Dear All,
    I am generating Columns chart using the class CL_GUI_CHART_ENGINE. I would like to display the column height of every column as tooltip for that column. How can i achieve it ??
    The following is the transformation that i am using -
    <?sap.transform simple?>
    <tt:transform xmlns:tt="http://www.sap.com/transformation-templates">
    <tt:root name="CATEGORIES"/>
    <tt:root name="SERIES"/>
    <tt:template>
    <ChartData>
    <Categories>
      <tt:loop ref="CATEGORIES">
       <Category>
        <tt:value/>
       </Category>
      </tt:loop>
    </Categories>
      <tt:loop ref="SERIES">
        <Series>
           <tt:attribute name="label"><tt:value ref ="LABEL"/></tt:attribute>
           <tt:attribute name="customizing"><tt:value ref ="ID"/></tt:attribute>
           <tt:loop ref="VALUES">
         <Point extension="alt='Capacity'"><Value type="y">
           <tt:value/>
         </Value></Point>
           </tt:loop>
         </Series>
      </tt:loop>
    </ChartData>
    </tt:template>
    </tt:transform>
    Now for all the Columns, the tool tip is same (Capacity). I want to display the column height also along with it. Thank you.
    Regards,
    kartik

    Hi,
    Have you consider using SVG ?
    http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
    Regards.
    From here:
    http://bost.ocks.org/mike/bar/2/
    Code:
    <!DOCTYPE html>
    <style>
    .chart rect {
      fill: steelblue;
    .chart text {
      fill: white;
      font: 10px sans-serif;
      text-anchor: end;
    </style>
    <svg class="chart" width="420" height="120">
      <g transform="translate(0,0)">
        <rect width="40" height="19"></rect>
        <text x="37" y="9.5" dy=".35em">4</text>
      </g>
      <g transform="translate(0,20)">
        <rect width="80" height="19"></rect>
        <text x="77" y="9.5" dy=".35em">8</text>
      </g>
      <g transform="translate(0,40)">
        <rect width="150" height="19"></rect>
        <text x="147" y="9.5" dy=".35em">15</text>
      </g>
      <g transform="translate(0,60)">
        <rect width="160" height="19"></rect>
        <text x="157" y="9.5" dy=".35em">16</text>
      </g>
      <g transform="translate(0,80)">
        <rect width="230" height="19"></rect>
        <text x="227" y="9.5" dy=".35em">23</text>
      </g>
      <g transform="translate(0,100)">
        <rect width="420" height="19"></rect>
        <text x="417" y="9.5" dy=".35em">42</text>
      </g>
    </svg>
    Result:

  • Dynamic Tool Tip Options

    Hi All,
    Could any body tell , different types of dynamic tool tips are possible in OAF.
    Regards,
    Raghava

    Hi Raghava,
    You can use this code :
    vorow.setAttribute("ToolTip","Your Message");
    OATableBean tableBean=(OATableBean)webBean.findChildRecursive("VO Name");
    OAImageBean c1 = (OAImageBean)tableBean.findChildRecursive("Value for which this tooltip should display");
    OADataBoundValueViewObject tip = new OADataBoundValueViewObject(c1,"ToolTip");
    c1.setAttributeValue(oracle.cabo.ui.UIConstants.SHORT_DESC_ATTR, tip);
    Hope this may help.
    Edited by: 869351 on Jan 18, 2012 1:50 AM

  • Tool Tip(Mouse Over)

    Hello All,
    I need to create a Tool Tip (Mouse Over) in BI. Requirement is *" I have a dashboard report which shows the different trends by arrows going up & down. When i take my mouse over the Up arrow, a text should come up which says 'Trend is up, because you gained as compared to last quarter'. similarly for Arrow going down. "*
    How to create such tool tip (mouse over) in BI. Please suggest.
    Regards,
    Ashish A.

    Hi Ashish, first of all, I am not sure to do a Tool-Tip-Text for Column Headers.
    As far as the column formulas, you can still use the code i sent and embed in the already updated column.
    Ex: Lets assume you have updated the formula of the column Products."Product ID" as REPLACE(Products."Product ID",'000','1111') || '_PD'. To show Products.Product_Name as a tool tip to the updated ProductID, you can embed the code as
    'OpenTag div title=" '|| Products.ProductName || ' " closetag' || REPLACE(Products."Product ID",'000','1111') || '_PD' || 'opentag /div closetag'
    Thanks
    Sai

  • Different styles

    Post Author: Andres
    CA Forum: Xcelsius and Live Office
    Hello.
    I would like to know why does Crystal Xcelsius shows me, for example, a Gauge with a different style to those showed as examples in the Xcelsius webpage.
    If I download an example, I can use the Gauge of the example, but I can't copy it to my graph.
    What can I do to copy the style of the things I like in the demos?
    Thanks.

    Post Author: bowens
    CA Forum: Xcelsius and Live Office
    Andres,
    The examples are probably using a different "Skin".  To change skins, from the tool bar go to View - Change Skins.  There are about six different Skins that you can use.  One thing to be aware of is that changing the skin may change all the components; it is worth experimenting with.
    Bill

  • Bridge CS6 tool tips are blocking the buttons!

    When I try to change the layout view (grid, list, etc.) with the buttons on the bottom right, the tool tips appear and I'm not able to click through them. So, basically, when I hover over them, the tool tips are blocking me from doing it.
    I look in Prefs for a Tool Tips checkbox and it's not checked right now, but they're still appearing, and still protecting the buttons from being clicked.
    Anyone know how to turn them off?
    And I have to say this is the most ridiculous problem I ever had with a program. Kinda funny.

    I still don't think it's the right checkbox to deactivate interface tool tips as it's in the "Thumbnails" sections of prefs. (And when I switch that on I get tool tips for thumbnails, when I switch it off I do not get tool tips for thumbnails. But the interface tool tips are always consistent.)
    Well, I'm again afraid. But this time for my big mouth...
    You are very right, I did have a long delay on my machine before the tooltips showed and having the checkbox set to on it seemed directly appearing.
    As there are many inconsistencies in Bridge (in fact throughout the whole Suite) this one is very big. Don't have a good alternative short name for it but calling 'show metadata when hovering over' 'show tooltips' is really a very bad approach
    The version is CS6 and I'm on a 2009 Mac Pro using 10.6.8 if that matters any.
    Thanks, it always matters, especially since this has become a general forum with both Windows and Mac. Different OS and different versions (including detail version number) gives more insight in possible solutions or advice (update etc)
    Also, I noticed that if I make Bridge CS6 smaller than the monitor window, then the tool tips over the buttons do not appear over the buttons anymore, but under them instead. The tool tips seem to be set to appear below the mouse pointer.  When Bridge is maximized and the bottom of the Bridge window touches the bottom of the monitor there is no place else for the tool tips to go, so they get pushed up... and cover the buttons.
    I always have the Dock in sight hence pressing the green button to enlarge my Bridge window to full screen leaves a small free space and as you well discovered has not your problematic behavior with tooltips over buttons.
    I would think Bridge should be able to detect the end of the screen, obviously it does because it knows to move the tool tips up so they don't appear "off screen".
    They should use this detection to determine if the tool tips should appear above or below (or away from the screen edge) the mouse pointer.
    Agreed
    I'll stop calling it a bug and switch it to "oversight". Bottom line though is the tool tips still block the buttons and shield them from being clicked.
    Oversight is the correct word, but besides the above described improvement they really should get rid of the name tooltips in thumbnails and add an option to really hide or show all tooltips as you would expect in a proper application
    Thanks for staying tuned and clarify!
    While the Bridge team tries to read most of this forum it might be wise to make a feature request for this, are you willing to do so since this is your discovery?

  • [svn:fx-4.x] 14985: Add support for mirroring for both error tips and tool tips in positionTip ().

    Revision: 14985
    Revision: 14985
    Author:   [email protected]
    Date:     2010-03-24 09:40:24 -0700 (Wed, 24 Mar 2010)
    Log Message:
    Add support for mirroring for both error tips and tool tips in positionTip().  The layoutDirection of the toolTip will be the same as the component it goes with, or LTR, if the component is not ILayoutDirectionElement.
    QE notes:
    Doc notes: None
    Bugs: SDK-25821
    Reviewed By: Jason
    Tests run: checkintests
    Is noteworthy for integration: No
    Ticket Links:
        http://bugs.adobe.com/jira/browse/SDK-25821
    Modified Paths:
        flex/sdk/branches/4.x/frameworks/projects/framework/src/mx/managers/ToolTipManagerImpl.as
        flex/sdk/branches/4.x/tools/dependencychecker/frameworkSwcExceptionsList.txt

    Remember that Arch Arm is a different distribution, but we try to bend the rules and provide limited support for them.  This may or may not be unique to Arch Arm, so you might try asking on their forums as well.

  • Type Tool tips-Navigating through & editing text

    Type Tool Tips for Photoshop
    Most folks understand how to create text in Photoshop. You select the Type Tool from the Toolbox, or you tap the "T" key on your keyboard. Then, in the Character Palette you set the attributes for font, color, size, etc. A simple click in your document window will mark the spot where you may begin typing unbounded "point" text. Or, you click and drag in your document window to create a paragraph text box. Type out your text, then tap your "Enter" key to commit the text to its new layer.
    It's pretty straightforward, and Photoshop offers a decent set of tools to adjust how your text looks. One hitch that long-timers will tell you about, though: It's generally accepted that Photoshop isn't the best application to be using if you have to have to create a lot of text because it doesn't have all of the adjustment functions necessary to produce large amounts of professional-quality text. Well, the real world being what it is, sometimes, and for some users, Photoshop is the only application they have to work with; might as well make the best of it, right?
    So, once you have text entered onto a layer in your document, how do you then reselect it either all of it or just a portion and navigate through it easily? What follows will answer some of those questions.
    Note: The keyboard shortcuts that follow assume you are using a Mac. If you're using Windows, substitute the CTRL key for "Command."
    Double-Click on the boxed 'T' thumbnail on the desired Text Layer in the Layers Palette. This will select and highlight all of the text on that layer.
    Then, if you want, you can use some keyboard shortcuts to move the "Blinking Bar" Type Tool cursor through the text.
    Assuming that your text is enclosed in a click-and-dragged out paragraph text box...
    When all text is highlighted:
    "Home" key will move cursor to the beginning of first line of text.
    "End" key will move cursor to the end of last line of text.
    When text is NOT highlighted, but cursor is flashing within the text:
    "Home" key moves cursor to the beginning of the line it's in.
    "End" key moves cursor to the end of the line it's in.
    Command + "Home" moves cursor to beginning of first line of text.
    Command + "End" moves cursor to end of the last line of text.
    Shift + "Home" selects text from cursor position to the beginning of the line it's in.
    Shift + "End" selects text from cursor position to the end of the line it's in.
    Shift + Command + "Home" selects text from cursor position to the beginning of the first line of text.
    Shift + Command + "End" selects text from cursor position to the end of the last line of text.
    Arrow keys can also be used to select text in various ways.
    When your cursor is flashing within the text:
    Shift + Right Arrow cumulatively selects text one character or space at a time, from cursor position, progressing toward the end of the text.
    Shift + Left Arrow cumulatively selects text one character or space at a time, from cursor position, progressing toward the beginning of the text.
    ⇒ Add the Command key to select whole words at a time, in either direction.
    Shift + Up Arrow selects text from cursor position back to the next line above the cursor.
    Shift + Down arrow selects text from cursor position forward to the next line below the cursor position.⇒ Add the Command key to select text starting from the cursor position, and accumulating either back to the beginning of the first line, or forward to the end of the last line.
    That covers most of what (or more than) you need to know to navigate through and highlight text. There are some other key combos, and now that you have an idea of what to do, I'll let you experiment and discover them on your own
    Type Tool Visual Indicators
    Keep a close eye on your Type Tool cursor as you move it near to and away from a hunk of text in your document window; it will change form to indicate different functions.
    When you see it as a plain old "I-Bar" cursor, like so:   ...that means that it's ready to select a position within that text, or to select a hunk of that text.
    When you see a "boxed I-Bar" cursor, like so:    ...that means your cursor is outside of the selectable area for the current text, and is ready for you to click (to start right in typing some unbounded point text) or click-n-drag (to create a paragraph text box). This will, of course, create a new text layer.
    How can you get a visual indicator of where that selectable area for current text begins and ends without blindly moving your Type Tool cursor around the text? Double-Click on the "Boxed-T" thumbnail in the Layers Palette. The text for that layer will become highlighted in your document window. See the black area that surrounds the text? That shows you the actual space occupied by the characters. If your Type Tool cursor is inside this highlighted area, it will display the plain "I-Bar" cursor. If it's outside of that area, it will display the "Boxed I-Bar" cursor.
    Want to FORCE Photoshop to create a new Type Layer, even though you're seeing the plain I-Bar cursor? Hold the SHIFT key, then either click, or click-n-drag out a paragraph text box.
    Info assembled & provided by phosphor.digital.network

    Myriad Pro OTF v 2.102, Regular
    Mac OS X 10.8.2
    8 GB RAM - 2.8 GHz
    Illustrator CS6 16.0.3
    No extra plug-ins beyond the initial install
    Double-clicking with the Arrow cursor will select existing type.
    The Type Tool jumps to a different location when creating a new block, like I have snap-to-grid turned on.
    Cursor is different than previous versions. After setting preferences to "Type Object Selection by Path Only" the cursor is behaving more like I expect it to. But… it still is working oddly. New doc, created a new type object, clicked arrow cursor to deselect it, then tried selecting it with the Type Tool. Creates a NEW path.
    Cursor looked like "Area Type Tool" in doc 1, but does not behave that way.
    Until I straighten this out, I'll stand by my original statement. It's unuseable.

  • Interactive Report Filter Operator Tool Tip

    version 4.0.2.00.07
    Hello,
    I had question raised to add a Tool Tip to the Operators in the Filter on the Interactive Reports.
    When the Operator select list is displayed the Managers don't know what all the operators mean. I noticed that if the mouse is hovered over an operator there is a Tool Tip displayed that says "Operator".
    Where and how could that Tool Tip be modified to display a defination of what that operator is for, if it can be done at all?
    Please let me know if you need more information.
    Thanks,
    Joe

    Erik-jan,
    I was hoping I could ask for you assistance again, if possible.
    I've made progress on this task, but I'm also having some issues.
    I've obtained the code as you've suggested and found that there are a few Operator lists.
    There are:
    apexir_STRING_OPT
    apexir_CLOB_OPT
    apexir_NUMBER_OPT
    apexir_DATE_OPT
    apexir_PSEUDO_OPT
    What I've done:
    Created Dynamic Actions for:
    apexir_STRING_OPT
    apexir_CLOB_OPT
    apexir_NUMBER_OPT
    apexir_DATE_OPT
    For each Operator list the Dynamic Actions are created like (changing the names and Operator selections as needed):
    name: Add tooltip to Date filter operators
    - event: Get Focus
    - selection type: jQuery Selector
    - jQuery Selector: select#apexir_DATE_OPT
    Create a true action with the following settings:
    - action: Execute Javascript Code
    - code:
    $(this.triggeringElement).find('option').each(function()
       if(this.value == "&gt;")
          $(this).attr("title", "greater than - Value in Column is greater than the value in Expression");
       else if(this.value == "&gt;=")
          $(this).attr("title", "greater than or equal to - Value in Column is greater than or equal to the value in Expression");
       else if(this.value == "&lt;")
          $(this).attr("title", "less than - Value in Column is less than the value in Expression");
       else if(this.value == "&lt;=")
          $(this).attr("title", "less than or equal to - Value in Column is less than or equal to the value in Expression");
       else if(this.value == "is null")
          $(this).attr("title", "is null - Value in Column is empty");
       else if(this.value == "is not null")
          $(this).attr("title", "is not null - Value in Column is not empty");
       else if(this.value == "is in the last")
          $(this).attr("title", "is in the last - Value in Column is in the last x timeframe");
       else if(this.value == "is not in the last")
          $(this).attr("title", "is not in the last - Value in Column is not in the last x timeframe");
       else if(this.value == "is in the next")
          $(this).attr("title", "is in the next - Value in Column is in the last x timeframe");
       else if(this.value == "is not in the next")
          $(this).attr("title", "is not in the next - Value in Column is not in the last x timeframe");
       else if(this.value == "between")
          $(this).attr("title", "between - Provides a means to test whether an Expression falls within a range of Values");
    })The problem is that the Tool Tips are only showing for the STRING Operator list. If a numeric column or a date column are selected the Tool Tip shows as 'Operator'. I thought that maybe it was a conflict with all these Dynamic Actions so I moved the STRING Dynamic Action to the last one in the sequence and put the DATE Dynamic Action as the first in the sequence. Still only the Tool Tips for the STRING columns are displayed and not the NUMERIC or DATE.
    I've tried to see if there was possibly a different name being used for the two lists that don't display, but I haven't found any other place where these lists are being created. I haven't found a way to set a breakpoint to confirm that's indeed the list being created with those names.
    Would you have any ideas here?
    Thanks,
    Joe

Maybe you are looking for