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>

score 43 · Answer 1 · edited Sep 17 '15 at 08:19

43

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

edited Sep 17 '15 at 08:19

thebenedict

2,539
3
20
29

answered Dec 16 '11 at 08:07

OBender

2,492
2
20
33

its used properly here, you want to enforce behavior. https://css-tricks.com/when-using-important-is-the-right-choice/ – OBender Jul 26 '18 at 06:06

score 12 · Answer 2 · answered May 22 '13 at 09:01

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.

score 2 · Answer 3 · answered Feb 07 '12 at 13:30

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

score 1 · Answer 4 · answered Jul 13 '10 at 21:01

1

#google_translate_element {
  display:none;
}

CSS display:none might work.

answered Jul 13 '10 at 21:01

Taylor Satula

520
1
5
20

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. – patridge Jun 09 '11 at 18:33
This hides the entire translation element. – Colin R. Turner Oct 12 '21 at 14:49

patridge · Answer 5 · 2011-06-13T15:32:19.343

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.

How to disable google translate original text tooltips

5 Answers5

Linked