rizaldy/rizaldy.club
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
dd82ab8d79
rizaldy.club/docs/features/popover previews.md
David Fischer 6c8023463d
Add support for image popovers (#854) 
* feat(popover): Add support for images

* fix: run prettier

* feat(popover): use switch logic for content types & adjust styles

* feat(popover): Add content type data tag for popover-inner class
2024-02-14 15:41:13 -05:00

1.0 KiB
Raw Blame History

title
Popover Previews

Like Wikipedia, when you hover over a link in Quartz, there is a popup of a page preview that you can scroll to see the entire content. Links to headers will also scroll the popup to show that specific header in view.

By default, Quartz only fetches previews for pages inside your vault due to CORS. It does this by selecting all HTML elements with the popover-hint class. For most pages, this includes the page title, page metadata like words and time to read, tags, and the actual page content.

When creating components, you can include this popover-hint class to also include it in the popover.

Similar to Obsidian, quartz layout.png can also be viewed as popups.

Configuration

  • Remove popovers: set the enablePopovers field in quartz.config.ts to be false.
  • Style: quartz/components/styles/popover.scss
  • Script: quartz/components/scripts/popover.inline.ts