.github
content
advanced
features
Latex.md
Mermaid diagrams.md
RSS Feed.md
SPA Routing.md
backlinks.md
callouts.md
folder and tag listings.md
full-text search.md
graph view.md
index.md
no-code layout configuration.md
popover previews.md
syntax highlighting.md
table of contents.md
upcoming features.md
tags
configuration.md
custom domain.md
hosting.md
index.md
philosophy.md
quartz-transform-pipeline.png
showcase.md
quartz
.gitignore
.prettierrc
CODE_OF_CONDUCT.md
LICENSE.txt
README.md
globals.d.ts
index.d.ts
package-lock.json
package.json
quartz.config.ts
tsconfig.json
14 lines
855 B
Markdown
14 lines
855 B
Markdown
---
|
|
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.
|
|
|
|
By default, Quartz only fetches previews for pages inside your vault due to [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/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|creating your own components]], you can include this `popover-hint` class to also include it in the popover.
|
|
|
|
## 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` |