[Bug] After the table is sorted, the tooltip is misplaced

[Xiaokang2022]

Context

• OS: Windows 11 23H2
• Browser: Edge 127.0.2651.74
• mkdocs: 1.6.0
• material: 9.5.31
• Python: 3.12.0
• tablesort: 5.3.0

Bug description

The way I added sorting to the table is what the documentation mentioned: https://squidfunk.github.io/mkdocs-material/reference/data-tables/#sortable-tables

When I use the following code to create a table, a bug occurs:

| Id  | Value           |
| --- | --------------- |
| 1   | A { title="A" } |
| 2   | B               |
| 3   | C               |
| 4   | D               |
| 5   | E               |

Before sorting, the position of this tooltip ("A") is correct:

But after sorting, this tooltip is misplaced:

It was only when I re-scrolled the page that it came back to the correct place.

Related links

• Reporting a bug
• https://squidfunk.github.io/mkdocs-material/reference/data-tables/#sortable-tables

Reproduction

9.5.31-bug.zip

Steps to reproduce

1. Create a table with a tooltip
2. Introduce JS for table sorting
3. Sort the column that contains the tooltip
4. Check whether the tooltip is misplaced

Browser

Edge

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for reporting. We'll look into it.

[squidfunk]

Fixed in e5c9575. Here's what happened and how it's fixed:

mkdocs-material/src/templates/assets/javascripts/components/tooltip2/index.ts

Lines 138 to 148 in e5c9575

	const offset$ =
	defer(() => getElementContainers(el)).pipe(
	mergeMap(watchElementContentOffset),
	throttleTime(1),
	// Note that we need to poll the value again if the active state changes,
	// as otherwise the tooltip might be misplaced. This particularly happens
	// when using third-party integrations like tablesort that change the
	// position of elements – see https://t.ly/Y-V7X
	combineLatestWith(active$),
	map(() => getElementOffsetAbsolute(el)),
	)

[squidfunk]

We'll leave it open until released.

[squidfunk]

Released as part of 9.5.33.