Hi

After some great help from Teodora, I've made some progress on the site this week.

But now I've gotten over-excited and decided to use buttons for our testimonials page (just to break it up a bit from too much text!)

So on the button, I want the name of the customer, then on mouseover I'd like the customer's comment to appear in a lovely stylised tooltip box. Can it be done with the code I'm using?

http://www.gene-genie.com/testimonials.html

Or if not then how can I get round it?

If possible, I'll be very happy....

Thx

C

I created a really simple jQuery tooltip plugin that can do this. It's pretty basic but there if you want to try it out. It also has preset themes, but again, pretty basic. I will get around to making it more advanced eventually...

 

http://jsfiddle.net/LyndseyB/5fuk7/5/

Hi Lynsdey

Thnank you for your reply - this looks perfectly workable.

But I'm confused about "nesting" two class elements, as the button (called noisy green) is the class with the tooltip called title - is this wrong (good old google search got me this far!)?

<li>
<input type="submit" class="noisy green" value="Mrs Jane Donaldson, Staffs..." title="I think your service is wonderful - thank you for tracing my family"/>
</li>

Thanks

Claire

You simply need to tell the jQuery which class to call the tooltip function on. So, if all buttons have the class 'noisy' for example, then you can use that in your function call, like so:

 

$(function() {
    $('.noisy').lbTooltip();
});

Sorry but I'm a bit lost - I forgot to say I'm a beginner!

I have 9 buttons (all the same style but in 6 different colours) - each button has a different name on it, and needs a different comment in the tooltip section.

Is 1btooltip the name for the first of 9 tooltips - ie i should have 9 different tooltips say 1a to 1i?

Or 1btooltip calls the overall tooltip style (say a block speech bubble 100 x 75px with white font) and includes the text as described in the title section in my line of coding?

What you need to do is give each button the same class. What you have at the moment is fine as all of the buttons have a class of 'noisy', see below:

 

<input type="button" class="noisy green" value="Mrs J, East Staffs..." title="...your service is wonderful and great value for money - thank you for tracing my family back to the 1700s"> 

 

Also, don't use a 'submit' input type for this; a button will do just fine as it's not going to interfere with your form and try and submit anything (unless that is what you want ).

 

So, now all you need to do is include the jQuery library followed by the jQuery plugin code and call the function. Like this:

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="link_to_plugin_code.js"></script>

<script>
$(function() {
    $('.noisy').lbTooltip(); //this tells the tooltip to run off all buttons with the class 'noisy'
});
</script>

Hope this helps.

Thank you so much, you're a star!

Successfully combined it and the tooltip now looks lurrrrvely!!!

And there is just one more thing if I can trouble you to save me some time searching fruitlessly...

I want a handwritten-style message to appear as the homepage launches - so it will say "Welcome to" and then fade away or splinter and dissolve or something.

What's the easiest way to do it - is there something more impressive than a marquee these days?

Thanks

C

Here is a Fiddle that demonstrates a simple fade in/out on an element. http://jsfiddle.net/LyndseyB/yWR4G/.

 

If you want to fade in and out, you can use jQuery alone and the fadeIn(), fadeOut(), hide() functions.

 

However, if you want to add some effects, you can make use of jQuery UI (http://jqueryui.com/effect/). I've added some effects in the above fiddle to demonstrate how they work. All you need to do is include the jQuery UI library after your jQuery library call on your document, so it would be something like this:

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="link_to_plugin_code.js"></script>

<script>
$(function() {
    $('.noisy').lbTooltip(); //call tooltip
    //function that fades in/out welcome message
    el = $('#welcome');
    el.hide().fadeIn('slow'); //hide it when the page loads then fade it in slowly. 
    setTimeout(function() {               
       el.fadeOut('slow'); 
    }, 1000); //fade out after 1 second, up this if you want!
});
</script>

On your HTML page then you would create a DIV to hold your message, e.g.

 

<div id="welcome"> This is my welcome message that will fade in! </div>

If you want to use a different ID or Class for the welcome message DIV, be sure to change the jQuery variable to match what you're using. For example, if you want to use div id="myDiv", your jQuery 'el' variable would be:

 

var el = $('#myDiv');

Hope this helps.