Question

我需要创建质量保证部分，点击该问题时会出现针对问号的提示。到现在为止，我点击它就可以了。

现在我需要针对点击的元素进行定位。我知道我需要使用Of Position属性，但不能使其适用于多个单击项目。

请帮忙！

这是最新的代码：

关于这个论坛，这里的规则是我的HTML：

<--! tip 1-->
<span id="thelp-1" class="helper hidden"></span>
<div class="center" >here will be text  1</div>
<a href="#" id="help-1"  class="help">?</a>         
    <div id="txthelp-1" class="hidden">
       <div class="helpContent">
         Tip text 1
          </div>
     </div>

<--! tip 2-->    
<span id="thelp-2" class="helper hidden"></span>
<div class="center">here will be text  1</div>
<a href="#" id="help-2"  class="help">?</a>         
      <div id="txthelp-2" class="hidden">
         <div class="helpContent">
             Tip text 2
         </div>
      </div>

和js代码：

    $(function() {
        $( ".helper" ).tooltip({
             items: '.helper',
              content: function() {
               var text= $(this).attr('id');
                return $( "#tx"+text).html();
            },
            position: {
                my: "center bottom-15",
                at: "center  top",
                //of: "#help-1",
                using: function( position, feedback ) {                    

                    $(this).css( position );  
                    $( "<div>" )
                            .addClass( "arrow" )
                            .addClass( feedback.vertical )
                            .addClass( feedback.horizontal )
                            .appendTo( this );
                }
             }

        });

        $( ".help" ).on( 'click', function() {
          var tip=  $(this).attr('id');
            if(!$(this).hasClass('opened')) {
             $( "#t"+tip ).tooltip( 'open' );                
             $(this).addClass('opened');               
        } else {
          $( "#t"+tip ).tooltip( 'close' );
            $(this).removeClass('opened');
        }                      
        });

    });

点击“带有id帮助的a”工具提示打开隐藏的“带有id thelp的跨度”。我需要的是让它出现在每个“a”元素上。

Answer 1

您可以在点击处理函数中设置工具提示位置：

$(".help").on('click', function () {
    var tip = $(this).attr('id');
    if (!$(this).hasClass('opened')) {
        $("#t" + tip).tooltip("option", "position", {
            my: "center bottom-15",
            at: "center  top",
            of: $(this),
            using: function (position, feedback) {
                $(this).css(position);
                $("<div>")
                    .addClass("arrow")
                    .addClass(feedback.vertical)
                    .addClass(feedback.horizontal)
                    .appendTo(this);
            }
        });
        $("#t" + tip).tooltip('open');
        $(this).addClass('opened');
    } else {
        $("#t" + tip).tooltip('close');
        $(this).removeClass('opened');
    }
});

演示：http://jsfiddle.net/VqQ8b/

JQuery UI Tooltip如何设置“点击元素”的自定义提示位置？

1 个答案: