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> 

Phrenic

Answer 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

Withhold

its used properly here, you want to enforce behavior. css-tricks.com/when-using-important-is-the-right-choice – Withhold

Answer 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.

Nonu

Answer 3

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*/ };
    }

Isothermal

Answer 4

#google_translate_element {
  display:none;
}

CSS display:none might work.

Fultz

This is for hiding the UI that Google injects into your page. If anyone wants to avoid the injected UI (and instead rely on something custom or the banner iframe), just don't embed the div before calling their script include. – Elver

This hides the entire translation element. – Bausch

Answer 5

It appears you can hide it with some CSS on the iframe they use to do the "tool tip".

.goog-te-balloon-frame { display: none; }

It might be a moving target as they update the service and change names/structure, but it works right now on a in-progress site of mine.

UPDATE: I've noticed a mouseover/hover background color effect that appears to linger on with this method, but it appears to be accomplished with JavaScript (added as style attributes on the element itself rather than a class toggle where you can override it easier). Tying into Google's translate JavaScript to do much of anything has proven quite difficult. Regardless, getting rid of the iframe was the most important part.

Elver

Answer 6

This works in 2023:

#goog-gt-tt
{
    display:none!important;
}

Seacoast