KTM
KTM

Reputation: 868

Positioning jquery ui tooltip

I have a select box and when selects an option it should display the tooltip correctly and it should be at the right of the select box , how to position like this ,and its now overlapping the tooltips ,how to avoid this and display one by one ? thanks .
Html :

<div class="form_block2" >
    Plan<SPAN style="color:#ff0000;">*</SPAN>:<br/>
    <select class="input_txt_block1" title="Select one" id="plan" name="plan">
        <option selected="selected"> ------- Select PLan ------- </option>
        <option title="three dynamic pages" value="1">Gold</option>
        <option title="two dynamic pages" value="2">Silver</option>
        <option title="one dynamic pages" value="3">Bronze</option>                               
        <option title="single page website" value="5">Basic</option> 
        <option title="Basic information" value="4">Listing</option>
    </select><span style="color:blue;" id="message"></span>
</div> 

Jquery:

$("#plan option").tooltip({
    position: {
        my: 500,
        at: 500
    }
});

EDIT : when i removing the position attribute ,its coming one by one but not positioning correctly.

here is the fiddle : FIDDLE

Upvotes: 1

Views: 14577

Answers (2)

Swap-IOS-Android
Swap-IOS-Android

Reputation: 4383

I made some modification, In my case i want to display tooltip like a absolute position to right top of hover element even if page is scrolled and it does not have space to display tooltip (We force to display tooltip on particular position to hover element).

        position: {
        my: 'left bottom-40',
        at: 'right',
        using: function(position, feedback) {
            console.log(feedback);
            position.top = feedback.target.top - (feedback.element.height);
            position.left = feedback.target.left + feedback.target.width;
            $(this).css(position);                   
        }
    },

Upvotes: 0

KTM
KTM

Reputation: 868

Okay i done that like this :

$(document,"#plan option").tooltip({position: {
                        my: "center",
                        at: "right+200",
                        track: false,
                        using: function(position, feedback) {
                            $(this).css(position);                   
                        }
                    }
                });

here is the FIDDLE

Upvotes: 5

Related Questions