javascript - focusin 和 focusout 无法正常工作

Question

jQuery 版本:1.10.1

我正在尝试编写一个工具提示，单击列表中的每个图像项时将显示什么。但是，在单击项目之前，工具提示会显示 html 内容，如 鼠标悬停时。请在下面查看我的尝试:

$('#main_8').attr('title', function () {
                            //$('#test').attr('title', function () {
                            //return "<div> hello </div>";
                            return $("#cat_8").remove().html();
                        });
                        $(document).ready(function (e) {
                            $('#main_8').tooltip({
                                //$('#test').tooltip({
                                content: function () {
                                    return $(this).prop('title');
                                },
                                position: {
                                    my: 'center bottom',
                                    at: 'center top-10',
                                    using: function (position, feedback) {
                                        $(this).css(position);
                                        $("<div>")
                                          .addClass("arrow")
                                          .addClass(feedback.vertical)
                                          .addClass(feedback.horizontal)
                                          .appendTo(this);
                                    }

                                },

                                disabled: true
                            }).on("focusin", function () {
                                $(this)
                                    .tooltip("enable")
                                    .tooltip("open");
                            }).on("focusout", function () {
                                $(this)
                                    .tooltip("close")
                                    .tooltip("disable");
                            });

                        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                        <div id="main_8" class="tile-video category-item" tabindex="99" title="Hello">
                            <a class="thumb" data-method="cat_8">
                                <img src="/Content/CmsContent/VideoIcons/no-image-small.jpg">
                            </a>
                            <h3>
                                <a data-method="cat_8">	Innovation &amp; Succession Planning Series	</a>
                            </h3>
                        </div>

                    </div>
<div id="cat_8">
 <b>This is cat 8</b>

</div>

Answer 1

请在调用focusin 和focusout 之前尝试禁用ma​​in div 的工具提示。请参阅下面的示例代码:

$('#main_8').attr('title', function () {
  $(this).tooltip({disabled:true});
  return $("#cat_8").remove().html();
});

希望对您有所帮助。