Google +1 and share buttons allow the readers of your site to share your content directly onto their Google+ stream. Google developers have tried best to make the buttons more interactive and clickable.

But there is one thing which seems like a clash between Google product policies: the interactive Google+ button hover pop-up bubble and Google AdSense ads.

Google+ interactive box overlapping AdSense ads

The Problem: Google+ interactive hover box over AdSense ads causes accidental clicks

You might have already know that any kind of falsely practiced layout that inspires site visitors to accidentally click on ads is against AdSense policies.

If the box that pops up when you hover over the +1 or Share button overlaps an AdSense ad, it can create serious problems for your AdSense publisher account, which may get warned or banned permanently!

If you think Google doesn’t consider its own products clashes, you are wrong. AdSense has advised webmasters to align things as best as they can without violating their policies, and the same applies to other Google products (like Google+) too.

So, you need to think about that nasty Google+ hover box.

Disabling the Google+ button hover boxes

To those who are looking to do that via API, Google strictly not allows you to disable its asset features from its API. There is one more way though.

I dug into this issue and come up with a solution for this problem. All you need is find out the popup-box CSS classes (or IDs), and hid them with some simple CSS.

This may be a bit advance for some people, but I’ve used Firefox’s Inspect Element tool to find out what CSS classes are responsible for Google+ hover popup divisions. Below is a screenshot of my inspection.

Google +1 button inspected

My inspection of Google +1 button code through Firefox’s Inspect Element tool

Coming back to the topic, to disable those hover boxes, you have to add the below code in your CSS file and then save the changes:

.gc-bubbleDefault, .pls-container {
  display: none;
}

In the above code, .gc-bubbleDefault and .pls-container are the classes responsible for rendering pop up on hover Google+ buttons. We have hid them using the display CSS property.

After saving the changes, open your site and hover over the buttons to see if the box is disabled or not. I’m sure you won’t see that interactive box anymore. Hope you find this useful. If so, circle me on Google+.