Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Best Way To Create A Fresh Hovering Tooltip

This is a discussion on Best Way To Create A Fresh Hovering Tooltip, within the Javascript section. This forum and the thread "Best Way To Create A Fresh Hovering Tooltip" are both part of the Frameworks category.

 
 Reply to this topicStart new topic
> Best Way To Create A Fresh Hovering Tooltip, A bit of a combined jquery css challenge
cosmicbdog
post Nov 14 2008, 12:29 AM
Post #1


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
What I'm wanting to do is create the least bandwidth method of a tooltip. For example, anything that has the class="tt" then will display the tooltip which is displayed in the title=""

So
CODE
<script type="text/javascript">

$('#links div').hover(function(){

         $('#tooltip').html($(this).attr('title'));

         $('#tooltip')fadeIn('fast');

}, function() {

         $('#tooltip').empty();

         $('#tooltip')fadeOut('fast');

})


</script>


<script type="text/css">

div#tooltip {

     display: none;
     -moz-border-radius: 5px;
     font-size: 12pt;
     background: #666666;
     color: orange;
     border: 2px solid #ccc;
    width: 300px;

}

div#links div {

     float: left;
     width: 50px;
     text-align: center;

}

</script>


<div id="tooltip" />


<div id="links">

<div title="This will do this">link 1</div>

<div title="This will do something else"><link 2</div>

</div>



With the above code, how can I make it so that the tooltip follows around the movement of the mouse pointer? Or even simpler, how can it be so that it appears hovering below the element.

I vaguely remember rakuli mentioning this in another post somewhere once. or maybe it was a chat.

Currently we're using a payed for prototype tooltip framework prototip. http://www.nickstakenburg.com/projects/prototip2/

Which is great... but I don't like the way you have to put in a bunch of code for each tooltip u want in. I think it should be easier and believe jquery has that ease of use to do this in a couple of lines.

Thanks for your input!

This post has been edited by cosmicbdog: Nov 14 2008, 12:41 AM
Go to the top of the page
 
+Quote Post
unitedcraig
post Nov 14 2008, 03:08 AM
Post #2


Squeeze Machine
Group Icon

Posts: 560
Joined: 14-February 08
From: Stockport
Is this any help to you?

Pretty easy to implement and mess around with smile.gif

http://jqueryfordesigners.com/coda-popup-bubbles/


--------------------
Craig Moran.co.uk

Kid Cudi - Kid Named Cudi Free Download

Conditional Comments… What are they?
Go to the top of the page
 
+Quote Post
cosmicbdog
post Nov 14 2008, 04:04 AM
Post #3


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
QUOTE (unitedcraig @ Nov 14 2008, 06:08 PM) *
Is this any help to you?

Pretty easy to implement and mess around with smile.gif

http://jqueryfordesigners.com/coda-popup-bubbles/


now that looks awesome!!!! i'm wondering though if there might be a simpler way even to achieve all that
Go to the top of the page
 
+Quote Post
« Next Oldest · Javascript · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   9 velo 425 26th February 2008 - 12:12 AM
Last post by: Vanessa
No New Posts   1 Jason 113 11th March 2008 - 10:16 AM
Last post by: Rakuli
No New Posts   3 velo 205 17th March 2008 - 01:10 PM
Last post by: velo
No New Posts   10 minute44 286 24th October 2008 - 08:28 AM
Last post by: MikeHopley
No New Posts   6 cosmicbdog 171 20th November 2008 - 07:01 AM
Last post by: cosmicbdog