mirror of
https://gitlab.com/MisterBiggs/brain-quartz.git
synced 2025-07-25 07:41:30 +00:00
.github
docs
advanced
features
Citations.md
Docker Support.md
Latex.md
Mermaid diagrams.md
Obsidian compatibility.md
OxHugo compatibility.md
RSS Feed.md
Roam Research compatibility.md
SPA Routing.md
backlinks.md
breadcrumbs.md
callouts.md
comments.md
darkmode.md
explorer.md
folder and tag listings.md
full-text search.md
graph view.md
i18n.md
index.md
popover previews.md
private pages.md
reader mode.md
recent notes.md
social images.md
syntax highlighting.md
table of contents.md
upcoming features.md
wikilinks.md
images
plugins
tags
authoring content.md
build.md
configuration.md
hosting.md
index.md
layout-components.md
layout.md
migrating from Quartz 3.md
philosophy.md
setting up your GitHub repository.md
showcase.md
upgrading.md
quartz
.gitattributes
.gitignore
.gitlab-ci.yml
.node-version
.npmrc
.prettierignore
.prettierrc
CODE_OF_CONDUCT.md
Dockerfile
LICENSE.txt
README.md
bun.lock
globals.d.ts
index.d.ts
package-lock.json
package.json
quartz.config.ts
quartz.layout.ts
tsconfig.json
6c8023463d
* 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
18 lines
1.0 KiB
Markdown
18 lines
1.0 KiB
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. 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](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.
|
|
|
|
Similar to Obsidian, [[quartz layout.png|images referenced using wikilinks]] 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`
|