How to disable google translate original text tooltips

Question

I have used google translate as a language converter in my site but it displays annoying tool tips called 'Original text'. How do I disable this and any other better ideas/tools/apis to do this?

Thanks. The code used is...

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 

Solution 1

Just add this CSS to the top of your CSS files:

.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

I wasted 8 hours figuring this out, but now after those 3 lines of CSS it looks great :-) You can see this in action here: SEOgenie - Automated SEO

Solution 2

There are some things you can do to "override" the Google translator display on your website.

I have been using the fallowing

To hide the suggestion box (the !important part is really important :) )

#goog-gt-tt, .goog-te-balloon-frame{display: none !important;} 
.goog-text-highlight { background: none !important; box-shadow: none !important;}

To hide the powered by

.goog-logo-link{display: none !important;}
.goog-te-gadget{height: 28px !important;  overflow: hidden;}

To remove the top frame

body{ top: 0 !important;}
.goog-te-banner-frame{display: none !important;}

Thera are some more, but i guess the above will drive you to the right path ;)

Regards to all.

Solution 3

#google_translate_element {
  display:none;
}

CSS display:none might work.

Solution 4

I think my method is better ^^

    $(document).ready(function() 
    {       
        translationTooltipsDisable();
    });


    function translationTooltipsDisable()
    {       
        //Override google's functions
        _tipon = function()  { /*Don't display the tooltip*/ };
        _tipoff = function() { /*Don't hide the tooltip*/ };
    }

View more solutions