Loading ...
Sorry, an error occurred while loading the content.

"One Tooltip, Many Context Elements" & dynamicly adding contexts.

Expand Messages
  • yetanotheridforme
    Hi everybody, in the example One Tooltip, Many Context Elements it is shown how I
    Message 1 of 4 , Sep 26, 2007
    • 0 Attachment
      Hi everybody,

      in the example "One Tooltip, Many Context Elements " it is shown how I configure a ToolTip to use multiple context-elements.

      As I need ToolTips for all nodes in a TreeView which load's the data dynamically, I must be able to add more context-elements when the TreeView loads more nodes from the server.

      So far I tried this:

      ### somewhere at the beginning of the page. ##########
      var TOOLTIP = {};
      TOOLTIP.contexts = new Array();

      var addToolTip = function (contextElement){
          if(!TOOLTIP.instance){
              TOOLTIP.config = { context: TOOLTIP.contexts, hidedelay: 0, showdelay: 0, preventoverlap: false };
              TOOLTIP.instance = new YAHOO.widget.Tooltip("toolTip", TOOLTIP.config);
          }
          TOOLTIP.contexts[TOOLTIP.contexts.length] = contextElement;
      }
      ################################################

      ### and further down, in the method that adds the new nodes to the tree. ##########
      ...
      YAHOO.util.Event.onAvailable(
          children[i].id,
          function(node){
              document.getElementById(node.id).title = node.label;
              addToolTip(node.id);
              },
          children[i]
      );
      ################################################

      The result is that TOOLTIP.contexts grows bigger and bigger (as it is supposed to), but not all of the elements in the TOOLTIP.contexts show a ToolTip on mouseover. In fact only the elements that where added in the most recent "expand"-action of the Tree.

      What's going wrong with my code? Why do ToolTips that did show up suddenly no longer show? Please help.

      Thanx in advance for you advice.
      Dominik










    • Caridy Patiño Mayea
      Hello Dominik, Unfortunately this isn t a option for you, because you need to be aware of every change in your treeview. A possible solution is to use a
      Message 2 of 4 , Sep 26, 2007
      • 0 Attachment
        Hello Dominik,

        Unfortunately this isn't a option for you, because you need to be
        aware of every change in your treeview. A possible solution is to use
        a dynamic tooltips solution. See this:

        http://www.bubbling-library.com/eng/api/docs/widgets/tooltips/examples

        Specially the second example: You can extend the "finder" method
        easily, and you can load the plugin on demand.

        Best Regards,
        Caridy (caridy at gmail.com)
        http://www.bubbling-library.com/

        --- In ydn-javascript@yahoogroups.com, "yetanotheridforme"
        <yahoogroups@...> wrote:
        >
        > Hi everybody,
        >
        > in the example "One Tooltip, Many Context Elements
        > <http://developer.yahoo.com/yui/examples/container/tooltip-multi.html>
        > " it is shown how I configure a ToolTip to use multiple
        > context-elements.
        >
        > As I need ToolTips for all nodes in a TreeView which load's the data
        > dynamically, I must be able to add more context-elements when the
        > TreeView loads more nodes from the server.
        >
        > So far I tried this:
        >
        > ### somewhere at the beginning of the page. ##########
        > var TOOLTIP = {};
        > TOOLTIP.contexts = new Array();
        >
        > var addToolTip = function (contextElement){
        > if(!TOOLTIP.instance){
        > TOOLTIP.config = { context: TOOLTIP.contexts, hidedelay: 0,
        > showdelay: 0, preventoverlap: false };
        > TOOLTIP.instance = new YAHOO.widget.Tooltip("toolTip",
        > TOOLTIP.config);
        > }
        > TOOLTIP.contexts[TOOLTIP.contexts.length] = contextElement;
        > }
        > ################################################
        >
        > ### and further down, in the method that adds the new nodes to the tree.
        > ##########
        > ...
        > YAHOO.util.Event.onAvailable(
        > children[i].id,
        > function(node){
        > document.getElementById(node.id).title = node.label;
        > addToolTip(node.id);
        > },
        > children[i]
        > );
        > ################################################
        >
        > The result is that TOOLTIP.contexts grows bigger and bigger (as it is
        > supposed to), but not all of the elements in the TOOLTIP.contexts show a
        > ToolTip on mouseover. In fact only the elements that where added in the
        > most recent "expand"-action of the Tree.
        >
        > What's going wrong with my code? Why do ToolTips that did show up
        > suddenly no longer show? Please help.
        >
        > Thanx in advance for you advice.
        > Dominik
        >
      • yetanotheridforme
        Hi guys, thanx for your help/tips. I found an other solution... might not be too nice, but it works fine for me so far. here s what I do. before I create the
        Message 3 of 4 , Oct 1, 2007
        • 0 Attachment
          Hi guys,

          thanx for your help/tips.  I found an other solution... might not be too nice, but it works fine for me so far. here's what I do.

          before I create the tree, I create an object to store all the "context-Id" of the elements I want to have a tooltip for.
          then I create the tree and whenever I add a node to the tree, I also add the ID to the array. when I'm finished loading the tree / expanding a node, I re-create the tooltip and hand over the array of context-ids and "tooltip-texts".

          now here comes the "not-so-nice" part:

          as the dom-element for which I want to add the tooltip doesn't exist when I add it to the tree, I cannot set the "title" property at that time. so i need to do this when I create the tooltip. (see the for-loop). but as so far this still performs quite o.k. for my needs.

          as I have more than one tree on the same page, my functions store the IDs for each tree in a seperate array (hence the use of parentId).

          when I completely reload a tree or change it's content, I destroy the corresponding ID-array.

          here's my code:

          --------------------------------------------------------------------------------------------

          var TOOLTIPS=  {};
          TOOLTIPS.createToolTips = function(parentId){
              var toolTip = TOOLTIPS[parentId+"ToolTip"];
              var contextArray = TOOLTIPS[parentId+"Contexts"];
              if(toolTip){
                  toolTip.destroy();
              }
              var contextIds = new Array();
              for(var i=0; i<contextArray.length; i++){
                  var next = contextArray[i];
                  document.getElementById(next.id).title = next.label;
                  contextIds[i] = next.id;
              }
              var config = { context: contextIds, showdelay:0, preventoverlap:false };
              toolTip = new YAHOO.widget.Tooltip("toolTip" + parentId, config);
              TOOLTIPS[parentId+"ToolTip"] = toolTip;   
          }

          TOOLTIPS.resetToolTips = function(parentId){
              TOOLTIPS[parentId+"Contexts"] = new Array();
          }

          TOOLTIPS.addContextId = function(id, label, parentId){
              var contexts = TOOLTIPS[parentId+"Contexts"];
              if(!contexts){
                  contexts = new Array();
                  TOOLTIPS[parentId+"Contexts"] = contexts;
              }
              var index = contexts.length;   
              contexts[index] = {id: id, label: label};       
          }

          --------------------------------------------------------------------------------------------

          cheers, & I hope this is usefull for others with the same problem.
          dominik

        • Caridy Patiño Mayea
          ... TOOLTIPS = { labels: {}, resetToolTips: function(){ this.labels = {}; }, addContextId: function(id, label){ this.labels[id] = label; } }; // customizing
          Message 4 of 4 , Oct 1, 2007
          • 0 Attachment
            An elegant solution:
            --------------------

            TOOLTIPS = {
            labels: {},
            resetToolTips: function(){
            this.labels = {};
            },
            addContextId: function(id, label){
            this.labels[id] = label;
            }
            };

            // customizing the tooltips for internal array requesting process
            YAHOO.CMS.widget.Tips.onCompile = function ( el, o ) {
            var id = el.getAttribute('id');
            if (YAHOO.lang.isString(id) && (id !== '') &&
            TOOLTIPS.labels.hasOwnProperty(id)) {
            // the anchor have an id defined, you can find the title in the
            internal array
            return TOOLTIPS.labels[id];
            }
            return false;
            };

            /*
            Pros:
            -----
            1- One YUI Tooltip instance for all areas.
            2- ids in the page are unique, that's why you don't need to separate
            the labels by parents.
            3- You don't need to walk the DOM.
            4- You don't need to modify the elements in the TreeView (no need to
            attach titles).
            5- Prevent memory leaks in IE (you don't need to purge the elements in
            the TreeView every time you reload it).
            6- more more more.

            Cons:
            -----
            None...
            */

            PD: I never tested it... but should work... there is another possible
            solution using the "finder" method instead to redefine "onCompile".

            See here how to extend the "finder" method...
            http://www.bubbling-library.com/sandbox/tooltips/tooltips-other-elements.html

            Best Regards,
            Caridy (caridy at gmail.com)
            http://www.bubbling-library.com/

            --- In ydn-javascript@yahoogroups.com, "yetanotheridforme"
            <yahoogroups@...> wrote:
            >
            > Hi guys,
            >
            > thanx for your help/tips. I found an other solution... might not be too
            > nice, but it works fine for me so far. here's what I do.
            >
            > before I create the tree, I create an object to store all the
            > "context-Id" of the elements I want to have a tooltip for.
            > then I create the tree and whenever I add a node to the tree, I also add
            > the ID to the array. when I'm finished loading the tree / expanding a
            > node, I re-create the tooltip and hand over the array of context-ids and
            > "tooltip-texts".
            >
            > now here comes the "not-so-nice" part:
            >
            > as the dom-element for which I want to add the tooltip doesn't exist
            > when I add it to the tree, I cannot set the "title" property at that
            > time. so i need to do this when I create the tooltip. (see the
            > for-loop). but as so far this still performs quite o.k. for my needs.
            >
            > as I have more than one tree on the same page, my functions store the
            > IDs for each tree in a seperate array (hence the use of parentId).
            >
            > when I completely reload a tree or change it's content, I destroy the
            > corresponding ID-array.
            >
            > here's my code:
            >
            >
            ------------------------------------------------------------------------\
            > --------------------
            >
            > var TOOLTIPS= {};
            > TOOLTIPS.createToolTips = function(parentId){
            > var toolTip = TOOLTIPS[parentId+"ToolTip"];
            > var contextArray = TOOLTIPS[parentId+"Contexts"];
            > if(toolTip){
            > toolTip.destroy();
            > }
            > var contextIds = new Array();
            > for(var i=0; i<contextArray.length; i++){
            > var next = contextArray[i];
            > document.getElementById(next.id).title = next.label;
            > contextIds[i] = next.id;
            > }
            > var config = { context: contextIds, showdelay:0,
            > preventoverlap:false };
            > toolTip = new YAHOO.widget.Tooltip("toolTip" + parentId, config);
            > TOOLTIPS[parentId+"ToolTip"] = toolTip;
            > }
            >
            > TOOLTIPS.resetToolTips = function(parentId){
            > TOOLTIPS[parentId+"Contexts"] = new Array();
            > }
            >
            > TOOLTIPS.addContextId = function(id, label, parentId){
            > var contexts = TOOLTIPS[parentId+"Contexts"];
            > if(!contexts){
            > contexts = new Array();
            > TOOLTIPS[parentId+"Contexts"] = contexts;
            > }
            > var index = contexts.length;
            > contexts[index] = {id: id, label: label};
            > }
            >
            >
            ------------------------------------------------------------------------\
            > --------------------
            >
            > cheers, & I hope this is usefull for others with the same problem.
            > dominik
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.