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> 

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