Different styling for different tooltips on a single page?

Question

I am working on a web application, and we are focusing very much on the consistency of the look&feel. When we are designing tooltip styles, we can see there is the 'plain style' tooltip and all kinds of styled tooltips. Like the bootstrap one for example.

Below is the example of a plain tooltip:

Below is ab example of a 'styled tooltip':

It's very natural to think that on the same page, the same style of tooltip should be used, right? but actually Google Drive used both of them in one page, and very close to each other.

As the picture below shows, in the top right corner of google drive, all ICONs in group A will use the 'plain style tooltip'; whereas all the ICONs in group B will use the 'styled tooltip'.

Is there a likely UX reason for this difference?

Answer 1

This is a bug with the Google UI, and not intentional.

You were right to notice the distinction, but it shouldn't be used as any kind of example of good design.

As of now (March 2015), Google is in the middle of a long process of migrating its apps and platforms to Material Design, and it will take a while before most apps are compliant.

Material Design has specific guidelines for consistent tooltips which can be found here. Eventually, Google tooltips should be moved to comport with Material Design guidelines, and look like this:

Answer 2

I'm pretty sure it's because Drive is developped by another team than the team who's working on the Google account canvas. More a question of schedule/production rather than UX/UI thought I guess.

Answer 3

Technically, the upper and the lower part belong to two different software products.
The upper one implements the UI to the user account, and handles the navigation.
The lower part belongs to the current application.

I assume they where created at different times. Between these, there was a change in the style guide used, regarding how to style tooltips.

So one part is just more up to date regarding style, and I expect the other part will be changed to that style as part of a future UI update.

Answer 4

I don't have an authoritative answer BUT the two tool tips refer to different environments and Google's designers might have wanted to differentiate between them.

The first, "plain," tooltip is for Google's main navigation section.

The second, "styled," tooltip is for the individual app within the broader Google environment.

Answer 5

I would go with the native tooltip if possible (if you're not trying to do a fancy tooltip with icons or colors). This will be most familiar to users and you don't have to worry as much about accessibility, etc. in the way you do when you use a custom solution.