javascript 定位jquery ui工具提示

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17523085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 08:38:46  来源:igfitidea点击:

Positioning jquery ui tooltip

javascriptjquery-uijquery-ui-tooltip

提问by KTM

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 :

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 ? 谢谢 。
网址:

<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

这是小提琴:FIDDLE

回答by KTM

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

这是小提琴

回答by Swap-IOS-Android

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);                   
        }
    },