CODEWITHSUNDEEP
javascriptjqueryhtml
Michael Copley
Michael Copley

Reputation: 35

focusin and focusout is not working correctly

jQuery Version: 1.10.1

I am attempting to write a tooltip what will be shown when clicking on each image items of list. However before clicking on item, the tooltip is showing the html content like enter image description here when hovering mouse. Please see my attempt below:

$('#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>

Upvotes: 1

Views: 262

Answers (2)

Minh Bui
Minh Bui

Reputation: 1030

please try to disable tooltip of main div before calling focusin and focusout. See my example code below:

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

Hopefully, it's helpful for you.

Upvotes: 2

Barmar
Barmar

Reputation: 782427

It has nothing to do with your Javascript code. The problem is with your HTML. You have:

<div id="main_8" class="tile-video category-item" tabindex="99" title="

The quote at the end starts the title string, and everything up to this line

</div><!-- div.list-sub-category -->
">

is being taken as the title of the DIV. So when you hover over the DIV, it displays all that HTML text.

You need to put a normal title there, and fix up all the HTML in the middle so it doesn't use HTML entities in place of all the quotes around attributes.

Upvotes: 0

Related Questions