DEV Community

Cover image for Chrome Tab Hover Card Images
Dima Vishnevetsky
Dima Vishnevetsky

Posted on

Chrome Tab Hover Cards Chrome Tab Hover Card Images

You can see a preview of the page by hovering on its tab.

Chrome Tab Hover Card Images - preview

Yes, you read it correctly.

This is the thing you didn't know you always wanted.

If you are like me and have at least 34 tabs open at any given time, you probably find it somewhat challenging to navigate between them.
About a year ago, Google added a new experimental feature (flag) to Chrome that shows an image preview of a site when you hover its tab. These "Tab Hover Card Images" are similar to how Microsoft implements them in the Edge browser on Windows 10.
This functionality is pretty stable now, and I have been using it for about half a year already.

So let's get straight to the tutorial because I know you want it.

First, enable the cards

  • Fire up Chrome
  • Type "chrome://flags" into the address bar, then press the "Enter" key
  • type "Tab Hover Cards" in the search bar

Or you can enter the following command
chrome://flags/#tab-hover-cards
in the address bar of the browser and hit "Enter".

chrome address bar with tab-hover-cards flag command

Here we have our flag setting.

chrome flag - tab hover card default

From the drop-down menu, a list appears on the right side of the screen and choose either Enabled to turn it on or Disable to turn it off.

chrome flag - tab hover card enabled

You might wonder what those "Enabled B" and "Enabled C" options. They are in charge of the time it takes for the card to appear after hovering the pointer over the tab.

If you decide to use only this flag, It will look something like this.

chrome flag - tab hover card preview

But we are here for the cool stuff, so let's add the image preview as well.

enter the following command
chrome://flags/#tab-hover-card-images
in the address bar of the browser and hit `"Enter".

chrome address bar with tab-hover-cards-images flag command

Here we have our flag setting again.

chrome flag - tab hover card images default

From the drop-down menu, a list appears on the right side of the screen and choose either Enabled to turn it on or Disable to turn it off.

chrome flag - tab hover card images enabled

Finally, tap on the "Relaunch" button to reopen the Chrome browser.

And here we have it, a preview of every tab we have in a hover of a mouse.

tab hover card images preview

  • The current tab will not show a preview image in Tab Hover Cards since it is already showing in the browser window.

Top comments (1)

Collapse
 
abespitalny profile image
Abraham Spitalny

Thanks Dima for the super informative post! I always have a bunch of tabs open, so this will definitely come in handy. I also never knew about these chrome flags which look interesting.