How To Disable Google Translate Original Text Tooltips

July 27, 2023 Post a Comment

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/ap

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();
    });


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

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

Code Html5