emulating google's tooltip with Tipster

1) TipsterUser2 Group: Guests
IP: 68.59.--.--

Posted:

great job on the tipster script! I am trying to emulate a tooltip that google uses for people to submit suggested translations when you translate a page with the google translator. Example:
http://google.com/translate?u=http%3A%2F%2Fwww.shibumi.org%2Feoti.htm&langpa ir=en%7Car&hl=en&ie=UTF8[/url]
http://google.com/translate?u=http%3A%2F%2Fwww.shibumi.org%2Feoti.htm&langpa ir=en%7Car&hl=en&ie=UTF8

Basically what I want to emulate specifically about this google tooltip is:
1. When you hover over a DIV element (the arabic text) a tooltip appears
2. the tooltip stays as long as you are hovering over the DIV element (the arabic text) and if you are hovering on the tooltip itself
3. you also have the option of closing the tooltip manually with a X or close button at the top right of the tooltip
4. if you click on "suggest a better translation" the only way to make the tooltip dissapear is by manually closing the tooltip with the X button, hovering away from the tooltip will not work anymore

I want to emulate all these things with tipster.
Currently tipster can:
1. enable a tooltip by hovering over a DIV element or link
2. the tooltip stays as long as you hover over the div element or link, or if you hover over the tooltip itself (this is seen in the "static" tooltip in the demonstration site)

So what i need help with is somehow giving tipster functionality to have a close button like google's tooltip, and also letting the tipster tooltip dissapear only by manually clicking close once a certain link has been clicked ( with google once you click "suggest a better translation" you can now only manually close the tooltip for it to dissapear)

so that's 2 things to add functionality to tipster to make it function like google's tooltip, you might already be able to do these things, maybe i'm illiterate when i read the documentation, but i need help in doing this, and would appreciate an example of someone showing me how to do this with tipster
thank you

3) TipsterUser2 Group: Guests
IP: 68.59.--.--

Posted:

Hey I looked at supernote, it does have some better features like the ability to close tooltips manually with a X button..etc..

However I am still going to go with tipster because of its template feature
I need to be able to pass variables to the array() function though
I'm not sure how to implement this, here is how I am trying to do it, maybe you can show me the correct way or tell me if this is possible:

4) TipsterUser2 Group: Guests
IP: 68.59.--.--

Posted:

5) Angus Turnbull Group: Moderators
Posts: 4235 Joined: 7 Dec 2003 Location: New Zealand IP: 203.173.--.--

Posted:

See the function in the example source where tips are created based on data in the onmouseover function call.

Seriously though, use SuperNote and a language like PHP together with a bit of CSS to put together your tips, it's very little extra effort :). I'm not going to implement major new feature for Tipster as it has been superceded by SuperNote.

- Angus.

6) TipsterUser2 Group: Guests
IP: 68.59.--.--

Posted:

Great :( I was looking forward to your reply all day, because I was hoping you could understand my problem, and offer a possible solution. I'll have to re-explain.

I am using PHP and am well versed in it, just not javascript. Basically I want to be able to use the same template, because the formatting for the tooltip will be the same for all tooltips. The only things that are changing in the tooltip code is the english and translation text fields. Those I will be adding in dynamically with php, the problem is there is no way that I know of to pass these variables to the tipster script or the supernote script. With supernote i'll have to create a seperate div for each new translation, instead of simply passing different vars for different translations and use the same div template. Do you see what I'm saying???...........

I am going to go above and beyond in the next couple posts to really explain in depth of what I mean, because i really want a solution to this, and your the only person to ask as its your script, and you wrote it.

7) TipsterUser2 Group: Guests
IP: 68.59.--.--

Posted:

If I was using supernote this is the only way I can think of to do it, here is some mock code, some brainstormish, some real.....

<head>
<script type="text/javascript" src="supernote.js"></script>
<link rel="stylesheet" type="text/css" href="supernote.css" />
</head>
<body>
<script type="text/javascript">
var supernote = new SuperNote('supernote', {});

function animFade(ref, counter)
{
//counter = Math.min(counter, 0.9); // Uncomment to make notes translucent.
var f = ref.filters, done = (counter == 1);
if (f)
{
  if (!done && ref.style.filter.indexOf("alpha") == -1)
   ref.style.filter += ' alpha(opacity=' + (counter * 100) + ')';
else if (f.length && f.alpha) with (f.alpha)
  {
   if (done) enabled = false;
   else { opacity = (counter * 100); enabled=true }
  }
}
else ref.style.opacity = ref.style.MozOpacity = counter*0.999;
};
supernote.animations[supernote.animations.length] = animFade;

addEvent(document, 'click', function(evt)
{
var elm = evt.target || evt.srcElement, closeBtn, note;

while (elm)
{
  if ((/note-close/).test(elm.className)) closeBtn = elm;
  if ((/snb-pinned/).test(elm.className)) { note = elm; break }
  elm = elm.parentNode;
}

if (closeBtn && note)
{
  var noteData = note.id.match(/([a-z_\-0-9]+)-note-([a-z_\-0-9]+)/i);
  for (var i = 0; i < SuperNote.instances.length; i++)
   if (SuperNote.instances[i].myName == noteData[1])
{
    setTimeout('SuperNote.instances[' + i + '].setVis("' + noteData[2] +
     '", false, true)', 100);
cancelEvent(evt);
   }
}
});

addEvent(supernote, 'show', function(noteID)
{
// Do cool stuff here!
});
addEvent(supernote, 'hide', function(noteID)
{
// Do cool stuff here!
});
</script>

8) tipuser2 Group: Guests
IP: 68.59.--.--

Posted:

<p><span class="supernote-hover-demo4">The End of the Internet</span>.</p>

<div id="supernote-note-demo4" class="snp-triggeroffset notedefault">
<table width="240" border="1" bordercolor="#000000">
  <tr>
    <td width="100%"><table width="230" border="0" bgcolor="#FDF9D7">
      <tr>
        <td width="224"><span class="style6">Original English text:</span></td>
      </tr>
      <tr>
        <td>The End of the Internet </td>
      </tr>
      <tr>
<td class="style6">Translated Russian text:</td>
      </tr>
      <tr>
        <td>Конец Интернет а</td>
      </tr>
      <tr>
<td><span class="style9">Suggest a better translation</span></td>
      </tr>
      <tr>
        <td><span class="style7">
          <textarea rows="3" cols="25" wrap="virtual" name="textarea2">Конец Интернет а</textarea>
        </span></td>
</tr>
      <tr>
        <td align="right"><span class="style7">
          <input name="submit2" type="submit" value="Contribute" />
        </span></td>
      </tr>
</table></td>
  </tr>
</table>
</div>

</body>

9) tipuser2 Group: Guests
IP: 68.59.--.--

Posted:

so triggering the tooltip with this code:
<p><span class="supernote-hover-demo4">The End of the Internet</span>.</p>

now i want to send some vars to the template in this code somehow

for example:
<p><span class="supernote-hover-demo4, send $english, send $translation">The End of the Internet</span>.</p>

that way it will pull up the demo4 div template, but i can simply pass string to put in that div

see i thought it would be easier to implement this with tipster, but you keep recommending supernote to me, neither of them i know a solution to do this, I hope badly that you can help me with this, and understand what i'm talking about

-appreciative
tipuser2

10) tipsteruser2 Group: Guests
IP: 68.59.--.--

Posted:

ok sorry i read about seeing the omouseover function for tipster
but I agree with you and realize that supernote is a better tooltip script period

so i want to do this with supernote, is there a similar function i overlooked to do the same thing with supernote??
maybe you could show me an example, above i gave some example of what i'm trying to do with supernote^^^

thanks a bunch :)

11) Angus Turnbull Group: Moderators
Posts: 4235 Joined: 7 Dec 2003 Location: New Zealand IP: 203.173.--.--

Posted:

I meant a PHP function like:

function makeNote($foo, $bar)
{
?><div blah="<?php echo($bar) ?>"><?php echo($foo) ?></div><?php
}

or similar, the idea that you move your templating into PHP and have a function call that makes a note that way. You might want to store the note data in an array and write out the trigger there-and-then and all the notes at the end of the document or something.

Good luck - Angus.

emulating google's tooltip with Tipster

Post a Reply: