Search code examples
javascriptjquerytooltipjquery-tools

Adjust position of some tool tips based on class of trigger using jqueryTOOLS

I am using the jqueryTOOLS plugin for jquery to generate tooltips for a set of form fields on my site.

The event trigger is dictated by a small piece of javascript:

$(function() {
$("#myform :input[title],label[title]").tooltip({
position: "top center",
offset: [-10, 0],
effect: "fade",
opacity: 1.0
      });
    });

As you can see, this triggers the title attribute of s and s as a tooltip onFocus.

You can also see that the configuartion of the tooltip takes place as part of this javascript, position is set, as well as an offset etc.

My problem:

There is no one position the tooltip can occupy relative to the fields in the form which is suitable. Some elements I need it to appear on the left, some to the right, and some above. I am looking for a way, based on the class of the element, to dictate an alternative position for the element.

I have tried:

Setting the class of a element for which I need the tip to appear to the left like so:

<input  
        title="This text becomes the tooltip" 
        class="errorleft" 
        type="radio" 
        name="somename" 
        value="value" 
        id="elementID"  
                />

and then adjusting my javascript to include an additional trigger:

$(function() {
$("#myform :input[title],label[title]").tooltip({
position: "top center",
offset: [-10, 0],
effect: "fade",
opacity: 1.0
      });
    });

    $(function() {
$("#myform.errorleft :input[title],label[title]").tooltip({
position: "center left",
offset: [0, 0],
effect: "fade",
opacity: 1.0
      });
    });

This does not work (and I can see why) and I know there is a way to do this, but I can't see a way to it, so far non of the documentation I can find on the jqt website has discussed this.

Any ideas much appreciated

jsFiddle
Here is a jsfiddle of my situation using a demo form, and the code I have attempted - in this example the Email field has the class "errorleft" where as all the others are classless. All tooltips display on the right http://jsfiddle.net/DjHr7/1/

Solution

  • You are missing a space in your selector. As currently written,

    $("#myform.errorleft :input[title],label[title]")

    means, find the element that has an id #myform AND a class .errorleft. It should work with the following syntax:

    $("#myform .errorleft")

    This means, find an element with class .errorleft inside an element with an id of #myform

    (You don't have to worry about adding :input[title],label[title] if you give each input field a class