DEV Community

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

Posted on

13 6

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.

Dev Diairies image

User Feedback & The Pivot That Saved The Project

🔥 Check out Episode 3 of Dev Diairies, following a successful Hackathon project turned startup.

Watch full video 🎥

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.

Tiger Data image

🐯 🚀 Timescale is now TigerData: Building the Modern PostgreSQL for the Analytical and Agentic Era

We’ve quietly evolved from a time-series database into the modern PostgreSQL for today’s and tomorrow’s computing, built for performance, scale, and the agentic future.

So we’re changing our name: from Timescale to TigerData. Not to change who we are, but to reflect who we’ve become. TigerData is bold, fast, and built to power the next era of software.

Read more

👋 Kindness is contagious

Delve into this thought-provoking piece, celebrated by the DEV Community. Coders from every walk are invited to share their insights and strengthen our collective intelligence.

A heartfelt “thank you” can transform someone’s day—leave yours in the comments!

On DEV, knowledge sharing paves our journey and forges strong connections. Found this helpful? A simple thanks to the author means so much.

Get Started