Custom Abbreviation Tooltip Feature

[otabekoff]

Is your feature request related to a problem? Please describe.

Is your feature request related to a problem? Please describe.

Currently, VitePress provides basic support for HTML elements like <abbr> and <acronym> for displaying abbreviations. However, these elements have limitations in terms of customization and responsiveness, especially when zoomed in. The default tooltip appearance can be less than ideal, with small font sizes and limited control over styling.

In the image below, you can see VitePress displayed on a 1920x1080 screen. Initially, the page did not cover the entire screen, so it was adjusted to fit within the viewable area. To eliminate the extra space on the left and right, I zoomed in on the page.

Upon zooming, I noticed that the tag displays its title, but the tooltip does not scale correctly with the browser zoom. This issue results in the tooltip appearing smaller and less readable compared to the rest of the content.

Describe the solution you'd like

To get rid of this problem and in meantime to provide Vitepress a good enhancement let's implement a tooltip feature.

I propose adding a feature that allows for custom abbreviation tooltips. This feature would enable users to define tooltips with full control over their appearance and behavior, including font size, color, and positioning. It would involve creating a customizable component or directive that could be used within Markdown files to replace or enhance the default HTML <abbr> and <acronym> behavior.

Or at least a tooltip provided by default theme and enlarges with page.

Describe alternatives you've considered

• Custom HTML/CSS: Using inline CSS in Markdown files to create tooltips. While functional, this approach is less flexible and more cumbersome to manage.
• JavaScript Solutions: Utilizing JavaScript libraries or custom scripts to create tooltips. This approach requires additional dependencies and complexity.
• Vue Components: Implementing a custom Vue component for tooltips. This provides flexibility but might require additional configuration and setup.

Additional context

The ability to create custom tooltips with specific styles and behavior would greatly enhance the user experience and provide a more polished look, especially when dealing with content that needs to be responsive and visually consistent.

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[otabekoff]

I've created a custom component for my own use, as VitePress supports custom global Vue components. However, I believe this could be a valuable feature for others as well, so I'm sharing it here in the hopes that it might be considered for inclusion.

Here are some of my suggestions for writing custom abbreviations:

• [HTML]{Hypertext Markup Language}
• `abbr[HTML|Hypertext Markup Language]`
• [HTML|Hypertext Markup Language]
• `HTML`[Hypertext Markup Language]
• `HTML`[Hypertext Markup Language]
• `HTML`[[Hypertext Markup Language]]
• HTML::Hypertext Markup Language::

Other suggestions:

• HTML|Hypertext Markup Language|
• HTML{Hypertext Markup Language}
• HTML (Hypertext Markup Language)
• HTML - Hypertext Markup Language
• HTML/Hypertext Markup Language
• HTML - "Hypertext Markup Language"

I thin the first suggestion which is [HTML]{Hypertext Markup Language} makes sense and fits what we want.

[otabekoff]

Today, I found Rollup.org is using something similar what I've talked about and the style, it's awesome. But, it is only for Shiki related stuff.

[lazarusA]

that is done with https://twoslash.netlify.app, and apparently only works for js/ts files. It would be nice to inject custom messages in a tooltip, namely

def function(x,y)
    return x + y
#          ? :> "message goes here" 

or something similar. Or even use the linter that gives u additional info in vscode,

but, is not documented or not easy to find. I don't know how to get that.