How do I screenshot a tooltip?

Hover to show it, keep the mouse still, and trigger the capture from the keyboard -- either the OS shortcut or an extension shortcut that captures the visible page without a click. Then crop.

How do I screenshot a hover effect in Chrome?

Either a keyboard-triggered capture while hovering, or force the :hover state on the element in DevTools so it persists while you capture normally.

Can I screenshot a hover state on a Mac?

Yes -- use the timer in Cmd + Shift + 5, or the keyboard shortcut of a browser screenshot tool while the mouse is held over the element.

← Back to blog

How to Screenshot a Hover State or Tooltip

September 17, 2026

A hover state exists only while the mouse is over the element. Moving the mouse to a screenshot button ends it. So every capture of a tooltip or a hover effect has to be started from the keyboard, or forced to stay.

Start the capture from the keyboard

Hover the element, keep the mouse still, and press a keyboard shortcut. On Windows, Win + Shift + S then drag -- but the drag moves the pointer, so drag from outside the hovered element and let the rectangle cross it. With the Demorta extension, hover, press Ctrl+Shift+8, then Enter: the whole visible page is captured with the pointer exactly where it was, and you crop to the tooltip in the editor. Try the free screenshot tool.

Use a timer

The Snipping Tool app on Windows and Cmd + Shift + 5 on a Mac both have a delay. Start the timer, move the mouse into position, hold still, and the capture fires while the hover is active.

Force it in DevTools

Inspect the element, and in the Styles pane click :hov and tick :hover. The browser renders the hover style permanently until you untick it, which makes any capture method work. This also captures hover styles that a real pointer would never hold still enough for.

Tooltips built with JavaScript rather than CSS do not respond to the :hover toggle; for those, the keyboard-triggered capture is the reliable route.

Frequently asked questions

How do I screenshot a tooltip?: Hover to show it, keep the mouse still, and trigger the capture from the keyboard -- either the OS shortcut or an extension shortcut that captures the visible page without a click. Then crop.
How do I screenshot a hover effect in Chrome?: Either a keyboard-triggered capture while hovering, or force the :hover state on the element in DevTools so it persists while you capture normally.
Can I screenshot a hover state on a Mac?: Yes -- use the timer in Cmd + Shift + 5, or the keyboard shortcut of a browser screenshot tool while the mouse is held over the element.

Keep reading

This is what Demorta does

Click through it — the same kind of demo you can record of your own product.

Try it on your own product

Record your first interactive demo free.

Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.

Start free →