How to disable google translate original text tooltips

问题

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>

回答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

回答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.

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

回答4:

#google_translate_element {
  display:none;
}

CSS display:none might work.

回答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.

来源：https://stackoverflow.com/questions/3234920/how-to-disable-google-translate-original-text-tooltips

标签

javascript

jquery

html

internationalization

google-translate