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

tooltip problem

Expand Messages
  • ragtek_ragga
    hi i have many links on a site a link looks so:
    Message 1 of 12 , Apr 28, 2007
    • 0 Attachment
      hi
      i have many links on a site
      a link looks so:
      <a title="hello friends...

      now we have upload some mixes and live sets...
      www.ek23sound.org

      enjoy the sound....
      PEACE" href="showthread.php?t=3726" id="thread_title_3726">Ek23 Sound
      upload!!!</a>

      so i build the title in it
      now i have a problem with the id
      it number is dynamic
      so i dont know what to write here in:
      YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tt2", {
      context:"link" });


      does somebody have a tip?
    • Eric Miraglia
      ragtek_ragga, The Dom Collection s getElementsBy method can probably help you here: //create a boolean function to test elements to see if they need a tooltip:
      Message 2 of 12 , Apr 28, 2007
      • 0 Attachment
        ragtek_ragga,

        The Dom Collection's getElementsBy method can probably help you here:

        //create a boolean function to test elements to see if they need a tooltip:
        var fnTest = function(el) {
        if(el.id) {
        return (el.id.indexOf("thread_title_") >-1);
        } else {
        return false;
        }
        };

        //now use getElementsBy, sending it your test function and letting it test all the 
        //<a> tags in your document; this will return an array of all the <a> elements that have
        //"thread_title_" in their id attribute:
        var tooltipTargets = YAHOO.util.Dom.getElementsBy(fnTest, "a", document.body);

        Once you've gotten that collection of <a> elements that meet your criteria, be sure to  read the "One Tooltip, Many Elements" example so that you understand how to use a single Tooltip instance for all of your <a> elements.  

        //pass in the array of your tooltip targets to your Tooltip constructor and use just
        //one instance for all your tooltips -- very efficient and fast:
        YAHOO.example.container.tt = new YAHOO.widget.Tooltip("tt", { context: tooltipTargets } ); 

        Regards,
        Eric


        ______________________________________________
        Eric Miraglia
        Yahoo! User Interface Library



        On Apr 28, 2007, at 9:40 AM, ragtek_ragga wrote:

        hi
        i have many links on a site
        a link looks so:
        <a title="hello friends...

        now we have upload some mixes and live sets...
        www.ek23sound.org

        enjoy the sound....
        PEACE" href="showthread.php?t=3726" id="thread_title_3726">Ek23 Sound
        upload!!!</a>

        so i build the title in it
        now i have a problem with the id
        it number is dynamic
        so i dont know what to write here in:
        YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tt2", {
        context:"link" });

        does somebody have a tip?


      • ragtek_ragga
        yea thx, works great! and thx for the realy good description
        Message 3 of 12 , Apr 28, 2007
        • 0 Attachment
          yea
          thx, works great!
          and thx for the realy good description
        • ragtek_ragga
          could you help me a second time pls i d like to build that in a second script now so i included the scriptfiles, added the id= event tag to the links and put
          Message 4 of 12 , Apr 28, 2007
          • 0 Attachment
            could you help me a second time pls

            i'd like to build that in a second script now

            so i included the scriptfiles, added the id="event" tag to the links
            and put <script type="text/javascript">YAHOO.example.container.tt2 =
            new YAHOO.widget.Tooltip("tt2", { context:"event" });
            </script> at the end of the template

            the link looks like this now
            <a href="calendar.php?do=getinfo&e=409&day=2007-5-1&c=1"
            title="http://www.euromayday.at .. treffpunkt(...)</a>
            at the first link it works
            on the others not, although the link looks right
            <a href="calendar.php?do=getinfo&e=417&day=2007-5-3&c=1"
            title="Toxic Sound
            No Entry
            only Tekkno" id="event">Toxic</a>
          • Eric Miraglia
            ragtek_ragga, It appears that you re using the same HTML ID attribute for multiple HTML elements in your second script. HTML element IDs must be unique. That
            Message 5 of 12 , Apr 30, 2007
            • 0 Attachment
              ragtek_ragga,

              It appears that you're using the same HTML ID attribute for multiple HTML elements in your second script.  HTML element IDs must be unique.

              That would explain the odd behavior you're seeing.

              Regards,
              Eric


              ______________________________________________
              Eric Miraglia
              Yahoo! User Interface Library



              On Apr 28, 2007, at 11:58 AM, ragtek_ragga wrote:

              could you help me a second time pls

              i'd like to build that in a second script now

              so i included the scriptfiles, added the id="event" tag to the links
              and put <script type="text/javascript">YAHOO.example.container.tt2 =
              new YAHOO.widget.Tooltip("tt2", { context:"event" });
              </script> at the end of the template

              the link looks like this now
              <a href="calendar.php?do=getinfo&amp;e=409&amp;day=2007-5-1&amp;c=1"
              title="http://www.euromayday.at .. treffpunkt(...)</a>
              at the first link it works
              on the others not, although the link looks right
              <a href="calendar.php?do=getinfo&amp;e=417&amp;day=2007-5-3&amp;c=1"
              title="Toxic Sound
              No Entry
              only Tekkno" id="event">Toxic</a>


            • Caridy Patiño Mayea
              ragtek_ragga, why you don´t try another technique to solve your problem? I think that you may use the event bubble up technique to generate each tooltip on
              Message 6 of 12 , May 1, 2007
              • 0 Attachment
                ragtek_ragga, why you don´t try another technique to solve your
                problem? I think that you may use the event bubble up technique to
                generate each tooltip on the fly, without worry about the IDs and you
                don´t need verify each link (at the beginning) to attach the
                corresponding tooltip object. If you have a dynamic ID for each link
                (as you mention in your first post), you can render the active tooltip
                (mouse over a link), on the fly using the corresponding dynamic ID.

                You can see an example of tooltips on the fly here:
                http://bubbling.comarq.com/themes/bubbling/examples/behavior-dynamic-tooltips-bubbling.html

                Full Explination here:
                http://bubbling.comarq.com/eng/node/tooltip-behavior

                Regards
                Caridy (caridy at gmail.com)

                --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
                <ragtek_ragga@...> wrote:
                >
                > could you help me a second time pls
                >
                > i'd like to build that in a second script now
                >
                > so i included the scriptfiles, added the id="event" tag to the links
                > and put <script type="text/javascript">YAHOO.example.container.tt2 =
                > new YAHOO.widget.Tooltip("tt2", { context:"event" });
                > </script> at the end of the template
                >
                > the link looks like this now
                > <a href="calendar.php?do=getinfo&e=409&day=2007-5-1&c=1"
                > title="http://www.euromayday.at .. treffpunkt(...)</a>
                > at the first link it works
                > on the others not, although the link looks right
                > <a href="calendar.php?do=getinfo&e=417&day=2007-5-3&c=1"
                > title="Toxic Sound
                > No Entry
                > only Tekkno" id="event">Toxic</a>
                >
              • cristopher pierson ewing
                Ho there, I m working on a tabbed interface for managing courses. Each tab contains data that is related to some sub-group of information about the course one
                Message 7 of 12 , May 1, 2007
                • 0 Attachment
                  Ho there,

                  I'm working on a tabbed interface for managing courses. Each tab contains
                  data that is related to some sub-group of information about the course one
                  is editing. I've been transferring the whole thing over to YUI and
                  dynamically-generated pages from an earlier, self-built version with
                  static tab content and I have a few questions. My test environment is OS
                  X and I'm using Firefox as my testing browser.

                  On to the questions:

                  1. There are eight tabs on the page. Each is generated from some
                  PHP-built HTML code that is transformed like in the example code here:

                  http://developer.yahoo.com/yui/examples/tabview/module_tabs.html

                  The problem is that about 15% of the time, the tab interface never
                  finished building. I get the first three or four tabs, and the rest
                  aren't there. Reloading the page builds the complete set, but that's a
                  step my users shouldn't need to take, no?

                  I am using the YAHOO.util.Event.onContentReady() to delay building the tab
                  set until the content is completely generated, but I'm guessing that this
                  isn't actually working right. Are there any suggestions out here for
                  ensuring that the full tab set gets built every time?


                  2. The content of each tab is generated dynamically by a request object
                  that calls another PHP script. I'd like to be able to pass variables on
                  to that script based on conditions that arise in the PHP document before
                  the 'tab modules' get built. The only way I can see so far to do so is to
                  write certain HTML elements into the PHP-genrated tab modules that get
                  consumed by the YUI javascript process and translated into GET variables
                  passed on in the 'dataSrc' property of the tab it generates. Is there a
                  better way to do this?

                  My biggest problem is that sometimes the javascript processing of the tab
                  modules seems to get ahead of the PHP generation of the HTML modules, and
                  errors get thrown because elements that are supposed to be in the module
                  have not yet been written. When this condition arises, execuction of the
                  Javascript halts, and the page is left in a partially-processed state that
                  looks terrible and will be confusing to my users. Perhaps there's a way
                  to throw an error that gets caught and generates a fall-back error page,
                  but I con't see what it would be.

                  Any suggestions.

                  I'm enjoying working with the YUI library a great deal. I hope I can
                  solve these little issues and get this up and running so my users can
                  enjoy the juicy goodness!

                  Thanks for any help in advance!

                  Cris

                  ********************************
                  Cris Ewing
                  CME and Telehealth Web Services
                  Department of Radiology Web Services
                  University of Washington
                  School of Medicine
                  Work Phone: (206) 685-9116
                  Home Phone: (206) 365-3413
                  E-mail: cewing@...
                  *******************************


                  On Tue, 1 May 2007, Caridy Patiño Mayea wrote:

                  > ragtek_ragga, why you don´t try another technique to solve your
                  > problem? I think that you may use the event bubble up technique to
                  > generate each tooltip on the fly, without worry about the IDs and you
                  > don´t need verify each link (at the beginning) to attach the
                  > corresponding tooltip object. If you have a dynamic ID for each link
                  > (as you mention in your first post), you can render the active tooltip
                  > (mouse over a link), on the fly using the corresponding dynamic ID.
                  >
                  > You can see an example of tooltips on the fly here:
                  > http://bubbling.comarq.com/themes/bubbling/examples/behavior-dynamic-tooltips-bubbling.html
                  >
                  > Full Explination here:
                  > http://bubbling.comarq.com/eng/node/tooltip-behavior
                  >
                  > Regards
                  > Caridy (caridy at gmail.com)
                  >
                  > --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
                  > <ragtek_ragga@...> wrote:
                  >>
                  >> could you help me a second time pls
                  >>
                  >> i'd like to build that in a second script now
                  >>
                  >> so i included the scriptfiles, added the id="event" tag to the links
                  >> and put <script type="text/javascript">YAHOO.example.container.tt2 =
                  >> new YAHOO.widget.Tooltip("tt2", { context:"event" });
                  >> </script> at the end of the template
                  >>
                  >> the link looks like this now
                  >> <a href="calendar.php?do=getinfo&e=409&day=2007-5-1&c=1"
                  >> title="http://www.euromayday.at .. treffpunkt(...)</a>
                  >> at the first link it works
                  >> on the others not, although the link looks right
                  >> <a href="calendar.php?do=getinfo&e=417&day=2007-5-3&c=1"
                  >> title="Toxic Sound
                  >> No Entry
                  >> only Tekkno" id="event">Toxic</a>
                  >>
                  >
                  >
                  >
                • alexshusta
                  Hey there Cris, 1. PHP generated tabs not building reliably - Just to clarify, the problem is in the javascript but the HTML is _always_ there, right? Then
                  Message 8 of 12 , May 1, 2007
                  • 0 Attachment
                    Hey there Cris,

                    1. PHP generated tabs not building reliably - Just to clarify, the
                    problem is in the javascript but the HTML is _always_ there, right?
                    Then there's an old school work-around for dealing with elements that
                    may not yet be rendered into the HTML tree - call your js function
                    from the bottom of the page after the HTML has already been parsed by
                    the client.

                    2. How to pass variables from the current page back to your server
                    with the YUI XHR class - You can append as many variable values as
                    you'd like to on a request if you use POST instead of GET. See:
                    http://developer.yahoo.com/yui/connection/#forms. However, I'm not
                    sure if that really addresses your problem.

                    You'll still have to iterate over an array of values on the server
                    side using the $_POST array. You said that the variables you'd like to
                    share with the second script occur within the first PHP script, right?
                    You could use local file storage or a database to write the conditions
                    out to a known location (say a file with the same name as the current
                    userId, you'll need a unique location for each user as many people may
                    hit your server at once and you really really don't want to store any
                    sensitive data in this way).

                    Or you could cheat (not really) and make PHP controller class that
                    handles all your connection requests, making calls into the two
                    discreet functions that you currently have and passing any data back
                    and forth that way. E.g. your controller is instantiated and waits for
                    a connection, connection arrives asking for tabs, the controller calls
                    the first script, first script returns an array of notable conditions
                    to the controller upon completion, controller waits for a connection,
                    connection arrives asking for tab contents, controller calls second
                    script passing in the array of conditions from the first script.

                    That's just off the top of my head though, and there's probably
                    (definitely) a more elegant solution available.

                    Hope that makes sense, and helps.
                    ~Alexander

                    --- In ydn-javascript@yahoogroups.com, cristopher pierson ewing
                    <cewing@...> wrote:
                    >
                    > Ho there,
                    >
                    > I'm working on a tabbed interface for managing courses. Each tab
                    contains
                    > data that is related to some sub-group of information about the
                    course one
                    > is editing. I've been transferring the whole thing over to YUI and
                    > dynamically-generated pages from an earlier, self-built version with
                    > static tab content and I have a few questions. My test environment
                    is OS
                    > X and I'm using Firefox as my testing browser.
                    >
                    > On to the questions:
                    >
                    > 1. There are eight tabs on the page. Each is generated from some
                    > PHP-built HTML code that is transformed like in the example code here:
                    >
                    > http://developer.yahoo.com/yui/examples/tabview/module_tabs.html
                    >
                    > The problem is that about 15% of the time, the tab interface never
                    > finished building. I get the first three or four tabs, and the rest
                    > aren't there. Reloading the page builds the complete set, but that's a
                    > step my users shouldn't need to take, no?
                    >
                    > I am using the YAHOO.util.Event.onContentReady() to delay building
                    the tab
                    > set until the content is completely generated, but I'm guessing that
                    this
                    > isn't actually working right. Are there any suggestions out here for
                    > ensuring that the full tab set gets built every time?
                    >
                    >
                    > 2. The content of each tab is generated dynamically by a request
                    object
                    > that calls another PHP script. I'd like to be able to pass
                    variables on
                    > to that script based on conditions that arise in the PHP document
                    before
                    > the 'tab modules' get built. The only way I can see so far to do so
                    is to
                    > write certain HTML elements into the PHP-genrated tab modules that get
                    > consumed by the YUI javascript process and translated into GET
                    variables
                    > passed on in the 'dataSrc' property of the tab it generates. Is
                    there a
                    > better way to do this?
                    >
                    > My biggest problem is that sometimes the javascript processing of
                    the tab
                    > modules seems to get ahead of the PHP generation of the HTML
                    modules, and
                    > errors get thrown because elements that are supposed to be in the
                    module
                    > have not yet been written. When this condition arises, execuction
                    of the
                    > Javascript halts, and the page is left in a partially-processed
                    state that
                    > looks terrible and will be confusing to my users. Perhaps there's a
                    way
                    > to throw an error that gets caught and generates a fall-back error
                    page,
                    > but I con't see what it would be.
                    >
                    > Any suggestions.
                    >
                    > I'm enjoying working with the YUI library a great deal. I hope I can
                    > solve these little issues and get this up and running so my users can
                    > enjoy the juicy goodness!
                    >
                    > Thanks for any help in advance!
                    >
                    > Cris
                    >
                    > ********************************
                    > Cris Ewing
                    > CME and Telehealth Web Services
                    > Department of Radiology Web Services
                    > University of Washington
                    > School of Medicine
                    > Work Phone: (206) 685-9116
                    > Home Phone: (206) 365-3413
                    > E-mail: cewing@...
                    > *******************************
                    >
                    >
                    > On Tue, 1 May 2007, Caridy Patiño Mayea wrote:
                    >
                    > > ragtek_ragga, why you don´t try another technique to solve your
                    > > problem? I think that you may use the event bubble up technique to
                    > > generate each tooltip on the fly, without worry about the IDs and you
                    > > don´t need verify each link (at the beginning) to attach the
                    > > corresponding tooltip object. If you have a dynamic ID for each link
                    > > (as you mention in your first post), you can render the active tooltip
                    > > (mouse over a link), on the fly using the corresponding dynamic ID.
                    > >
                    > > You can see an example of tooltips on the fly here:
                    > >
                    http://bubbling.comarq.com/themes/bubbling/examples/behavior-dynamic-tooltips-bubbling.html
                    > >
                    > > Full Explination here:
                    > > http://bubbling.comarq.com/eng/node/tooltip-behavior
                    > >
                    > > Regards
                    > > Caridy (caridy at gmail.com)
                    > >
                    > > --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
                    > > <ragtek_ragga@> wrote:
                    > >>
                    > >> could you help me a second time pls
                    > >>
                    > >> i'd like to build that in a second script now
                    > >>
                    > >> so i included the scriptfiles, added the id="event" tag to the links
                    > >> and put <script type="text/javascript">YAHOO.example.container.tt2 =
                    > >> new YAHOO.widget.Tooltip("tt2", { context:"event" });
                    > >> </script> at the end of the template
                    > >>
                    > >> the link looks like this now
                    > >> <a href="calendar.php?do=getinfo&e=409&day=2007-5-1&c=1"
                    > >> title="http://www.euromayday.at .. treffpunkt(...)</a>
                    > >> at the first link it works
                    > >> on the others not, although the link looks right
                    > >> <a
                    href="calendar.php?do=getinfo&e=417&day=2007-5-3&c=1"
                    > >> title="Toxic Sound
                    > >> No Entry
                    > >> only Tekkno" id="event">Toxic</a>
                    > >>
                    > >
                    > >
                    > >
                    >
                  • ragtek_ragga
                    theres just one more problem here if i have long url s it would be nice if the part would be cut off just for demo what i mean:
                    Message 9 of 12 , Sep 13, 2007
                    • 0 Attachment
                      theres just one more problem here
                      if i have long url's it would be nice if the part would be "cut off"

                      just for demo what i mean: http://www.ragtek.org/help.jpg
                    • ragtek_ragga
                      hi i m putting a tooltip this way on my site: YAHOO.namespace( example.container ); YAHOO.example.container.tt1 = new
                      Message 10 of 12 , Nov 18, 2007
                      • 0 Attachment
                        hi
                        i'm putting a tooltip this way on my site:



                        <script type="text/javascript">
                        YAHOO.namespace("example.container");
                        YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", {
                        context:"hide_unread", text:"Diese Tabelle kann in den Einstellungen
                        (später auch durch einen klick hier) deaktiviert werden!" });
                        </script>
                        <table class="tborder" cellpadding="$stylevar[cellpadding]"
                        cellspacing="$stylevar[cellspacing]" border="0" width="100%"
                        align="center">
                        <tr>
                        <td class="alt1"><span id="hide_unread" style="float:right;"><img
                        src="http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif"
                        /></span>Es gibt <strong><a href="search.php?do=getnew"> neue
                        Beiträge</a></strong> seit deinem letzten Besuch!</if></td>
                        </tr>
                        </table>

                        it looks now like this: www.ragtek.org/tool.jpg
                        the blue is the point where the mouse should be to show the tooltip
                        the red is the tooltip
                        1. how can i set the style?
                        2. i'd like to show the tooltip more right! because now nobody is
                        seeing it because it is left and the hoverpoint is right
                      • ragtek_ragga
                        ... src= http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif ... solved it, i thought that the css is global included, but it wasn t
                        Message 11 of 12 , Nov 18, 2007
                        • 0 Attachment
                          --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
                          <ragtek_ragga@...> wrote:
                          >
                          > hi
                          > i'm putting a tooltip this way on my site:
                          >
                          >
                          >
                          > <script type="text/javascript">
                          > YAHOO.namespace("example.container");
                          > YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", {
                          > context:"hide_unread", text:"Diese Tabelle kann in den Einstellungen
                          > (später auch durch einen klick hier) deaktiviert werden!" });
                          > </script>
                          > <table class="tborder" cellpadding="$stylevar[cellpadding]"
                          > cellspacing="$stylevar[cellspacing]" border="0" width="100%"
                          > align="center">
                          > <tr>
                          > <td class="alt1"><span id="hide_unread" style="float:right;"><img
                          >
                          src="http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif"
                          > /></span>Es gibt <strong><a href="search.php?do=getnew"> neue
                          > Beiträge</a></strong> seit deinem letzten Besuch!</if></td>
                          > </tr>
                          > </table>
                          >
                          > it looks now like this: www.ragtek.org/tool.jpg
                          > the blue is the point where the mouse should be to show the tooltip
                          > the red is the tooltip
                          > 1. how can i set the style?
                          > 2. i'd like to show the tooltip more right! because now nobody is
                          > seeing it because it is left and the hoverpoint is right
                          >
                          solved it, i thought that the css is global included, but it wasn't
                        • Huynh Cao Ky
                          Hi Ragtek! 1. You can change your tooltip by CSS. The Tootip object will use create a DOM with id is in your argument. Example: new YAHOO.widget.Tooltip( tt1 ,
                          Message 12 of 12 , Nov 20, 2007
                          • 0 Attachment
                            Hi Ragtek!

                            1. You can change your tooltip by CSS.
                            The Tootip object will use create a DOM with id is in your argument.
                            Example:
                            new YAHOO.widget.Tooltip("tt1",
                            { context:"ctx",
                            text:"My text was set using the 'text'
                            configuration property" });
                            => HTML of this object is:
                            <div id="tt1" class="yui-module yui-overlay yui-tt" style="z-index:
                            2; left: 127px; top: 147px; visibility: hidden;">
                            <div class="bd">My text was set using the 'text' configuration
                            property</div><div class="yui-tt-shadow"/>
                            </div>
                            => You can change your tip's style in CSS:
                            #tt1 {
                            [Css Code]
                            }

                            Regard,

                            ragtek_ragga wrote:
                            >
                            > hi
                            > i'm putting a tooltip this way on my site:
                            >
                            > <script type="text/javascript">
                            > YAHOO.namespace("example.container");
                            > YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", {
                            > context:"hide_unread", text:"Diese Tabelle kann in den Einstellungen
                            > (später auch durch einen klick hier) deaktiviert werden!" });
                            > </script>
                            > <table class="tborder" cellpadding="$stylevar[cellpadding]"
                            > cellspacing="$stylevar[cellspacing]" border="0" width="100%"
                            > align="center">
                            > <tr>
                            > <td class="alt1"><span id="hide_unread" style="float:right;"><img
                            > src="http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif
                            > <http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif>"
                            > /></span>Es gibt <strong><a href="search.php?do=getnew"> neue
                            > Beiträge</a></strong> seit deinem letzten Besuch!</if></td>
                            > </tr>
                            > </table>
                            >
                            > it looks now like this: www.ragtek.org/tool.jpg
                            > the blue is the point where the mouse should be to show the tooltip
                            > the red is the tooltip
                            > 1. how can i set the style?
                            > 2. i'd like to show the tooltip more right! because now nobody is
                            > seeing it because it is left and the hoverpoint is right
                            >
                            >


                            --

                            *HUYNH CAO KY *.
                            HTK-INC
                            http://www.htk-inc.com <http://www.key-king.com/>
                            MSN Messenger huynhcaoky@...
                            Skype huynhcaoky
                          Your message has been successfully submitted and would be delivered to recipients shortly.