How to set tooltips for code blocks?

[ssbarnea]

While we can configure title=... for code blocks, we currently cannot add HTML native tooltips via tooltip=..., which can prove very useful, as tooltips do not take screen space.

Any chance to get this added?

[squidfunk]

Thanks for suggesting. I'm not sure what you mean. Where should the tooltip appear? Below the entire code block? If you could provide a mock up or more detailed explanation, that would be very helpful for evaluating if this might be a fit for the project.

[ssbarnea]

HTML browser are able to display tooltip attribute by themselves on almost any visible element. You don't need to write any code for tooltip, only to add the title attribute to the top element (div?) of the block will make it work.

See https://www.w3schools.com/tags/att_global_title.asp -- that is basically what tooltip does. Extra bonus is that it also improves the accessibility part.

[squidfunk]

If you add a title attribute to any element inside the Markdown part of a document, the tooltip logic will display it. Unfortunately, title is already used by Pygments to display a title above the code block, so that won't work, but this will:

<div title="Custom tooltip" markdown>

``` yaml
markdown_extensions:
  - pymdownx.highlight:
      anchor_linenums: true
      line_spans: __span
      pygments_lang_class: true
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences
```

</div>

Result:

[squidfunk]

I'm marking this as an answer, since it solves the problem at hand.