Bootstrap: Tooltip Rollover adds display: none

[pendurocher1]

I've added a tooltip to a icon and when I rollover the icon the tooltip displays but then it adds a display: none to my icon and it disappears

[Lalem001]

Could you create an example on jsFiddle please?

[mdo]

The tooltip should disappear if your content triggering it does.

[pendurocher1]

Thanks guys for ALL your help in resolving this issue and closing the ticket.

[mdo]

Apologies for misreading it, but hold the sarcasm—we're only human :).

If you can reproduce this in a jsbin or jsfiddle, we can take a look.

[mdo]

Welp, until an example can be provided, I'll leave this as closed. As soon as it's reproducible, we'll reevaluate.

[pendurocher1]

Apologies for the sarcasm, but you never actually did anything to solve the problem.
I have recreated it http://jsfiddle.net/LSThf/28/
When you rollover the "linkedin" they disappear. I have add all the scripts that are being used on the site, and have narrowed it down to a conflict with one of the mootools.js.
I ended up putting on a "display:inline!important" in the CSS.
Is there a better/correct way in fixing this issue?
Thanks

[Dentxinho]

Your fiddle doesn't work because your js files are hosted under a restricted area (it asks for authentication)

[pendurocher1]

I have changed the files to another site. Can you view it now? http://jsfiddle.net/LSThf/38/

[Dentxinho]

I've removed mootols-more.js from your fiddle and it worked...

[GordonD1980]

I don't think it is BS adding the style:none.

In your fiddle, removing the non-bootstrap dependencies the links remain visible. There is something in the other files that causes this problem, not BS.

Regards,
Gordon

[pendurocher1]

Thanks guys for your help and looking at it, I guess I'll just leave it as is with the display:inline in my css. and poke around more in the other code.

[404ryannotfound]

In case anyone else has this issue,
pendurocher1, In Joomla it's mootools-core.js that is causing the conflict
if you don't need Mootools, in your template index.php you can disable loading of it like so:
unset($this->_scripts[JURI::root(true).'/media/system/js/mootools-core.js']);
unset($this->_scripts[JURI::root(true).'/media/system/js/mootools-more.js']);

[pepperstreet]

@Flocktome @pendurocher1
Got the same "display: none" issue in Joomla 3 and Joomlart T3 framework. A real bummer if you want to use an extension like MintJoomla Cobalt CCK. Funnily, the issue occurs in this combination. Developers tend to swear on their own project. Cobalt makes use of Joomla JUI / bootstrap. T3 template comes with bootstrap in template folder! Joomla 3 adds and still relies on Mootools. (As far as I know in form actions and validation, also tooltips. I have heared that up-coming J!3.2 will get rid of Mootools... earlier than expected)

The current problem:
Removing Mootools is not a solution (currently). Frontend editing and submission will not work, the same applies to Cobalt CCK, which uses J! core classes on form actions, list sorting order, list view template switcher etc. Actually any element that have a BS tooltip is hidden by "display: none". A real bummer!

Is there any solution to get Mootools side-by-side with Joomla / Joomlart T3 / Cobalt?
Any help and info is much appreciated!

You may discuss over here:
http://support.mintjoomla.com/en/cobalt-8/questions/Elements+with+tooltips+disappear+at+mouse+hover+ended+-4211.html#comment-form

Thanks in advance.

[N6REJ]

did this ever get truly resolved? protostar doesn't have the problem ( bs2 ) yet bs3 based templates do.

[pendurocher1]

I never did. I just left the CSS display:inline!important on the link

[pepperstreet]

Regarding JOOMLA / MOOTOOLS / BS3 solution...
the T3 framework base and template include a special file called: script.js. The file might be located in 2 places, choose one of it:

_YourJoomla -> plugins -> system -> t3 -> base -> js_
_YourJoomla -> plugins -> system -> t3 -> base-bs3 -> js_

This file includes several fixes. So, you might either load/include the whole file,
or just use a reduced version of it. It's easy to identify the comments about "Mootools" and "Tooltip". Just make sure to keep the jquery/javasript syntax intact.

Some templates allow to add "Custom Code" via the template style parameters. Just tested the script with HELIX3 framework by Joomshaper. It seems to work fine with Cobalt CCK !!! ;)

Hope this helps.

[AnrietteC]

I pasted the following in my Helix3 template, custom.js, and it fixed the issue for me:

//remove conflict of mootools more show/hide function of element
(function(){
    if(window.MooTools && window.MooTools.More && Element && Element.implement){

        var mthide = Element.prototype.hide,
            mtshow = Element.prototype.show,
            mtslide = Element.prototype.slide;

        Element.implement({
            show: function(args){
                if(arguments.callee &&
                    arguments.callee.caller &&
                    arguments.callee.caller.toString().indexOf('isPropagationStopped') !== -1){ //jquery mark
                    return this;
                }

                return $.isFunction(mtshow) && mtshow.apply(this, args);
            },

            hide: function(){
                if(arguments.callee &&
                    arguments.callee.caller &&
                    arguments.callee.caller.toString().indexOf('isPropagationStopped') !== -1){ //jquery mark
                    return this;
                }

                return $.isFunction(mthide) && mthide.apply(this, arguments);
            },

            slide: function(args){
                if(arguments.callee &&
                    arguments.callee.caller &&
                    arguments.callee.caller.toString().indexOf('isPropagationStopped') !== -1){ //jquery mark
                    return this;
                }

                return $.isFunction(mtslide) && mtslide.apply(this, args);
            }
        })
    }
})();

[sachieldvangel]

I had this problem with Joomla 3.9

I pasted the following in my Helix3 template, custom.js, and it fixed the issue for me:

//remove conflict of mootools more show/hide function of element
(function(){
    if(window.MooTools && window.MooTools.More && Element && Element.implement){

        var mthide = Element.prototype.hide,
            mtshow = Element.prototype.show,
            mtslide = Element.prototype.slide;

        Element.implement({
            show: function(args){
                if(arguments.callee &&
                    arguments.callee.caller &&
                    arguments.callee.caller.toString().indexOf('isPropagationStopped') !== -1){ //jquery mark
                    return this;
                }

                return $.isFunction(mtshow) && mtshow.apply(this, args);
            },

            hide: function(){
                if(arguments.callee &&
                    arguments.callee.caller &&
                    arguments.callee.caller.toString().indexOf('isPropagationStopped') !== -1){ //jquery mark
                    return this;
                }

                return $.isFunction(mthide) && mthide.apply(this, arguments);
            },

            slide: function(args){
                if(arguments.callee &&
                    arguments.callee.caller &&
                    arguments.callee.caller.toString().indexOf('isPropagationStopped') !== -1){ //jquery mark
                    return this;
                }

                return $.isFunction(mtslide) && mtslide.apply(this, args);
            }
        })
    }
})();

I had this issue with Joomla 3.9 and Helix Ultimate where labels were getting display: none inserted on the new user registration form when hovering for the popover. Just posting to say the above custom .js inserted in the template's custom javascript field worked like a charm. Thank you.