How to disable google plus one (+1) button's hover bubble?

Question

In my page, how can i remove the google +1 button's tooltip message?

Example: http://www.google.com/webmasters/+1/button/

Documentation: http://code.google.com/apis/+1button/

I tried many ways, but can't figure it out.

Hydromechanics

Why would you want to? One great feature about this button (and similar "share" buttons) is that it works exactly the same, no matter where you see it. – Citrus

Answer 1

You are supposed not to do that as per the google policies that you agree to in using their API: http://www.google.com/webmasters/+1/button/policy.html .

You're not allowed to modify the button, its behavior included.

You can be controlled by Google's robots as stated in same page. If you don't want the button's behavior, don't use Google's +1 API.

Indopacific

Answer 2

I agree with @Kheldar, but as a teaching lesson, here is how you would do it:

When the popup shows up, the HTML starts with this:

<table cellpadding="0" cellspacing="0" style="width: 324px; height: 68px; " frame="void" rules="none" class="gc-bubbleDefault pls-container">

Just add some CSS to not show it:

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

Epicedium

Yes, i know this way, but i wanted to kill the popup by the API. :) – Nystrom

Answer 3

Firefox users: Print and follow these steps to turn off /disable/remove Google +1 Buttons from search results with or without AdBlock or AdBlock Plus and WITHOUT having to create a Google profile:

1) Go to Firefox Profiles folder on your hard drive.

To locate your Firefox Profiles in Windows XP, Vista, 7, press: [Windows Key]+[R] → Type in (minus the quotes): “%APPDATA%\Mozilla\Firefox\Profiles” → click OK

or from the Taskbar click:START → RUN → Type in (minus the quotes):
“%APPDATA%\Mozilla\Firefox\Profiles” → click OK

The Profiles Folder will open. There will probably be only one folder in the Profiles folder.

2) Open the folder with the ".default" extension name.

3) Look for a folder named Chrome in the .default folder. If Chrome folder does not exist, you need to create it. (If the Chrome folder exists, skip to #4).

To create the Chrome folder: Right click inside the .default folder → Select NEW FOLDER → Type in (without the quotes): “Chrome”

4) Open the Chrome folder and create a .text file named userContent.css. (The contents of this file tells Firefox not to display +1 Buttons on web pages.)

To create a text file named userContent.css: Right click inside the Chrome folder → Select NEW → TEXT DOCUMENT → Type in (without the quotes): "userContent.css"

Windows will bring up “Rename” warning dialogue box that says: If you change a file name extension, the file may become unusable. Are you sure you want to change it? Yes No

Select YES

5)Open userContent.css. (It will open in Notepad with a box titled: userContent.css - Notepad).

6) Paste the following into Notepad (minus the quotes): " .esw { display:none!important; } /* Hides the +1 Button completely */ "

Be sure to include the period (.) before "esw" in the above.

7) Save the Notepad file and Close it: Select FILE → SAVE → FILE → CLOSE (or select X on folder title bar to Close)

8) Close remaining open folders.

9)If Firefox Browser is not closed, close it. Re-open Firefox Browser. Navigate to Google’s search page and perform a search. Google +1 Buttons will be gone from all future search results.

Dibru

Answer 4

I got the same problem as I wanted to have the buttons
in the same layout as the facebook and twitter share buttons (from addthis)
without the g+ tooltip -- it's not the +1 rather the share

it does exist -- but is hidden .. (needs url parameter -- https://plus.google.com/share?url={URL} )

on https://developers.google.com/+/plugins/share/
scroll down ... to "Share Link" .. with a code example

<a href="https://plus.google.com/share?url={URL}"
  onclick="javascript:window.open(this.href,'', 
    'menubar=no,toolbar=no,resizable=yes,
    scrollbars=yes,height=600,width=600');return false;">
<img src="https://www.gstatic.com/images/icons/gplus-64.png" 
  alt="Share on Google+"/></a>

well with addthis the class is addthis_button_google_plusone_share
not yet in their api docs as if they added it later on

-- am a bit annoyed about their inconsistence
(tw -> js:window.open vs fb, g+ -> url:_black)
-- adds to the url trackingcodes -- well it can be disabled

<script type="text/javascript"> 
var addthis_config = { data_track_clickback: false } </script> 

facebook and twitter handle it exactly the same
-- get paramter in respective url

fb: http://www.facebook.com/sharer/sharer.php?u={URL}
tw: https://twitter.com/intent/tweet?text=XXXX&url={URL}&related=

Valor