https://github.com/etigerstudio/hexo-tag-hint
A Hexo tag plugin to display text hint/spoiler tooltip.
https://github.com/etigerstudio/hexo-tag-hint
css hexo hexo-plugin hint tooltip
Last synced: 5 months ago
JSON representation
A Hexo tag plugin to display text hint/spoiler tooltip.
- Host: GitHub
- URL: https://github.com/etigerstudio/hexo-tag-hint
- Owner: etigerstudio
- License: mit
- Created: 2017-12-06T08:27:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T23:58:17.000Z (over 3 years ago)
- Last Synced: 2025-08-09T07:50:04.307Z (11 months ago)
- Topics: css, hexo, hexo-plugin, hint, tooltip
- Language: JavaScript
- Homepage:
- Size: 1.2 MB
- Stars: 28
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
`hexo-tag-hint` is a simplistic plugin for [Hexo](https://hexo.io) which enables presenting a floating bubble containing the hint text when the content text gets *hovered* or *clicked* (yes, mobile-ready!).
## 💡 Basic Syntax
Insert this little [Nunjucks](https://github.com/mozilla/nunjucks) snippet anywhere you want to show your hints:
```js
{% hint 'body_text' 'hint_text' %}
```
Where `body_text` is the normal post body text, `hint_text` is the text that should be presented inside the hint bubble. Use `\'` to escape `'` if necessary.
E.g.:
```js
{% hint 'misfits' 'hexo-tag-hint' %}
```
## 📖 Multi-line Support
Multi-line hints are supported right now🎉. Append additional hint text lines to build a multi-line hint:
```js
{% hint 'body_text' 'hint_text_1st_line' 'hint_text_2nd_line' ... %}
```
E.g.:
```js
{% hint 'Hexo' 'A fast, simple &' 'powerful blog framework' %}
```
## 🔌 Install & Update
Execute following one-liners to integrate this plugin into your Hexo project, or to update the plugin:
```bash
$ npm install hexo-tag-hint # install this plugin
$ npm update hexo-tag-hint # update the plugin
$ npm install hexo-tag-hint@latest # force update to latest version
```
## 🚀 Roadmap
- [x] Add support for multi-line hints
- [ ] Strip redundant style classes
- [ ] Make Color theme configurable
- [ ] Make CDN configurable & switchable
- [ ] Ensure text stability during animation
✏️*Open issues to request for more features!*
## 🙌 Special Thanks
Main feature of presenting hint bubble is heavily backed by [`hint.css`](https://github.com/chinchang/hint.css), an awesome CSS only tooltip library.
> Brought to you with ❤️ by E-Tiger Studio, 2017-2020.