Popovers

Popovers let you add information that, on a button click, pops over the primary content.

Basic use¶

Create a popover using the :::pop[] container directive.

:::pop[tgt1]
Ello, poppet!
:::

• The text in square brackets is the popover target. In this example, the target is tgt1.

• The text between the colons is the popover content. In this example, the content is Ello, poppet!

Popovers work by scanning a post from top to bottom in search of each popover target and replacing the target with a button that reveals the corresponding popover content.

For example, a post with Markdown like this...

I like milk X1
 
:::pop[X1]
Moo 🐮
:::

would be rendered like this...

I like milk

Code blocks¶

Popovers can be used inside code blocks 😍

```python
import pandas as pd #2
 
df = pd.DataFrame({'x': [1,2,3]})
```
 
:::pop[#2]
Presumably you've already installed pandas. If not, install it with `pip install pandas`
:::

import pandas as pd 
 
df = pd.DataFrame({'x': [1,2,3]})

Icons¶

By default, popovers use

• circle-plus to signify the open action
• circle-x to signify the close action

You can modify the default icons by providing Lucide icon ids for the openIcon and closeIcon properties of the :::pop directive.

Bears hibernate for up to 100 days XYZ
 
:::pop[XYZ]{openIcon="door-open" closeIcon="door-closed"}
Brown bears hibernate for 5-8 months
:::

Bears hibernate for up to 100 days

Duplicate Targets¶

We suggest using a unique name for each of your popover targets so that you'll never have to worry about duplicate targets that "compete" for content. But for the curious...

Consider this example Markdown

Lorem (1) ipsum dolor (1) sit amet.
 
:::pop[(1)]
AAA
:::
 
:::pop[(1)]
BBB
:::

The first (1) will render "AAA" and the second (1) will render "BBB". This is a direct consequence of the logic used for rendering popovers, which works more or less like this 👇

Identify the first :::pop tag and its target
Scan the post from top to bottom, searching for the corresponding target
Replace the target with the corresponding contents
Repeat for the subsequent :::pop tags