{"id":13612339,"url":"https://github.com/erikw/jekyll-glossary_tooltip","last_synced_at":"2025-08-27T01:53:17.696Z","repository":{"id":49763267,"uuid":"390309485","full_name":"erikw/jekyll-glossary_tooltip","owner":"erikw","description":"Jekyll plugin providing a glossary liquid tag that will show a tooltip of a term definition.","archived":false,"fork":false,"pushed_at":"2025-03-31T16:57:57.000Z","size":842,"stargazers_count":29,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-04T21:39:37.416Z","etag":null,"topics":["definitions","glossary","hacktoberfest","jekyll","jekyll-plugin","liquid-tag","tooltip"],"latest_commit_sha":null,"homepage":"https://erikw.github.io/jekyll-glossary_tooltip/","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erikw.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-28T10:26:00.000Z","updated_at":"2025-03-31T16:58:00.000Z","dependencies_parsed_at":"2024-01-14T04:54:21.308Z","dependency_job_id":"e97b4e0e-e26a-498b-9915-18931ddaac87","html_url":"https://github.com/erikw/jekyll-glossary_tooltip","commit_stats":{"total_commits":142,"total_committers":1,"mean_commits":142.0,"dds":0.0,"last_synced_commit":"3ab814d929162457e11f8bd503ca34fc0f25db79"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikw%2Fjekyll-glossary_tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikw%2Fjekyll-glossary_tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikw%2Fjekyll-glossary_tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikw%2Fjekyll-glossary_tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erikw","download_url":"https://codeload.github.com/erikw/jekyll-glossary_tooltip/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256036,"owners_count":20909239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["definitions","glossary","hacktoberfest","jekyll","jekyll-plugin","liquid-tag","tooltip"],"created_at":"2024-08-01T20:00:28.138Z","updated_at":"2025-08-27T01:53:17.687Z","avatar_url":"https://github.com/erikw.png","language":"Ruby","funding_links":[],"categories":["Tags"],"sub_categories":[],"readme":"# Jekyll Glossary Tooltip Tag Plugin [![Post on X](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://x.com/intent/tweet?text=Get%20a%20nifty%20tooltip%20for%20term%20definitions%20in%20your%20Jekyll%20blog%20with%20this%20plugin\u0026url=https://github.com/erikw/jekyll-glossary_tooltip\u0026via=erik_westrup\u0026hashtags=jekyll,plugin)\n[![Gem Version](https://badge.fury.io/rb/jekyll-glossary_tooltip.svg)](https://badge.fury.io/rb/jekyll-glossary_tooltip)\n[![Gem Downloads](https://img.shields.io/gem/dt/jekyll-glossary_tooltip?label=gem%20downloads)](https://rubygems.org/gems/jekyll-glossary_tooltip)\n[![Travis Build Status](https://img.shields.io/travis/com/erikw/jekyll-glossary_tooltip/main?logo=travis)](https://app.travis-ci.com/github/erikw/jekyll-glossary_tooltip)\n[![pages-build-deployment](https://github.com/erikw/jekyll-glossary_tooltip/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/erikw/jekyll-glossary_tooltip/actions/workflows/pages/pages-build-deployment)\n[![Code Climate Maintainability](https://api.codeclimate.com/v1/badges/7ffb648ec4b77f3f9eb8/maintainability)](https://codeclimate.com/github/erikw/jekyll-glossary_tooltip/maintainability)\n[![Code Climate Test Coverage](https://api.codeclimate.com/v1/badges/7ffb648ec4b77f3f9eb8/test_coverage)](https://codeclimate.com/github/erikw/jekyll-glossary_tooltip/test_coverage)\n[![CodeQL](https://github.com/erikw/jekyll-glossary_tooltip/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/erikw/jekyll-glossary_tooltip/actions/workflows/codeql-analysis.yml)\n[![SLOC](https://sloc.xyz/github/erikw/jekyll-glossary_tooltip?lower=true)](#)\n[![Number of programming languages used](https://img.shields.io/github/languages/count/erikw/jekyll-glossary_tooltip)](#)\n[![Top programming languages used](https://img.shields.io/github/languages/top/erikw/jekyll-glossary_tooltip)](#)\n[![License](https://img.shields.io/github/license/erikw/jekyll-glossary_tooltip)](LICENSE.txt)\n[![OSS Lifecycle](https://img.shields.io/osslifecycle/erikw/jekyll-glossary_tooltip)](https://github.com/Netflix/osstracker)\n\n\u003cp align=\"center\"\u003e\n    \u003c!-- Ref: https://dev.to/azure/adding-a-github-codespace-button-to-your-readme-5f6l --\u003e\n    \u003ca href=\"https://github.com/codespaces/new?hide_repo_select=true\u0026ref=main\u0026repo=390309485\" title=\"Open in GitHub Codespaces\" \u003e\u003cimg alt=\"Open in GitHub Codespaces\" src=\"https://github.com/codespaces/badge.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e [!TIP]\n\u003e :point_right: **Live demo**: https://erikw.github.io/jekyll-glossary_tooltip/\n\n\n\u003cimg src=\"/img/tooltip_screenshot.png\" width=\"256\" align=\"right\" alt=\"Screenshot of the glossary tooltip term definition\" title=\"Example of tooltip definition of the term 'Jekyll'.\"\u003e\n\nThis plugin simplifies for your readers and you by making it easy to define terms or abbreviations that needs an explanation. Define a common dictionary of terms and their definition in a YAML file. Then inside markdown files you can use the provided glossary liquid tag to insert a tooltip for a defined word from the dictionary. The tooltip will show the term definition on mouse hover.\n\nIt's also possible to provide an optional URL to for example a term definition source reference. To also support mobile devices, this URL link is placed inside the tooltip pop-up itself, rather than making the term itself clickable. This is so that on mobile device, you will first tap the word to get the hover tooltip, then click the link in the tooltip if desired.\n\n\n# Installation\n1. Add this gem to your Jekyll site's Gemfile in the `:jekyll_plugins` group:\n   * On CLI (in project root directory):\n   ```shell\n   bundle add --group jekyll_plugins jekyll-glossary_tooltip\n   ```\n   * Or manually:\n   ```ruby\n   group :jekyll_plugins do\n     [...]\n     gem 'jekyll-glossary_tooltip'\n   end\n   ```\n1. Run `$ bundle install`.\n1. In your site's `_config.yml`, enable the plugin:\n   ```yml\n   plugins:\n     - jekyll-glossary_tooltip\n   ```\n1. Create a `_data/glossary.yml` file, according to the 'Glossary Term Definition File' section below, with your terms.\n1. Use the liquid tag in a page like `{% glossary term_name %}`\n1. Add CSS styling for the tooltip from [jekyll-glossary_tooltip.css](lib/jekyll-glossary_tooltip/jekyll-glossary_tooltip.css). You need to make sure that the pages where you will use the glossary tag have this styling applied. Typically this would mean 1) copying this file to your `assets/css/` directory 2) editing your theme's template for blog posts (or what pages you desire) to include this CSS in the header like `\u003clink rel=\"stylesheet\" href=\"/assets/css/jekyll-glossary_tooltip.css\"\u003e`. However you could also copy this file's content in to your `main.css` or `main.scss` or however you build your site's CSS.\n1. Now just build your site and you will get nice nice term definition tooltips on mouse hover (or mobile, tap) for you terms!\n   ```shell\n   bundle exec jekyll build\n   ```\n\n# Usage\n## Glossary Term Definition File\nCreate a file `_data/glossary.yml` to host your shared term definition entries. This file should contain a list of term entries in the format of:\n\n```markdown\n- term: a_term_name           # Can contain spaces\n  definition: A description of the term\n  url: https://jekyllrb.com/  # Is optional\n- term: another term\n  definition: Some other term definition text\n```\n\nThis could look something like:\n```markdown\n- term: Jekyll\n  definition: A Static Site Generator (SSG) built with ruby. Widely adopted as of GitHub Pages inclusion.\n  url: https://jekyllrb.com/\n- term: SSG\n  definition: A Static Site Generator compiles the website before deployment. Then the generated web content is simply retrieved as-is by the client without any code running at retrieve time.\n- term: Jamstack\n  definition: JavaScript + API + Markup - a way of buildin and hosting websites.\n  url: https://jamstack.org/\n- term: EmbeddedLiquidURL\n  definition: This definition has an URL with embedded liquid tags to make it dynamic at build time. Note special YAML syntax for being able to use liquid (1.)\n  url: \u003e\n    {{ site.baseurl }}{% link page2.md %}\n```\n\n1. See [here](https://documentation.platformos.com/use-cases/using-liquid-markup-yaml) for notes on using Liquid in YAML.\n\n\n## Tag Usage\nOn any page where you've made sure include the needed CSS styling, you can use the glossary tag simply like\n\n```markdown\nHere I'm talking about {% glossary term_name %} in a blog post.\n\nThe term name can contain spaces like {% glossary operating system %}.\n\nEven if the term is defined in _data/glossary.yml as 'term_name', the matching is case-insensitive\nmeaning that I can look it up using {% glossary TeRM_NaME %}. Note that the term is displayed as\ndefined in the tag rather than the definition, here meaing 'TeRM_NaME'.\n\nThe case-styling above works as there's still a case-insensitive match. But what about when you\nactually want to dispaly the term differently? Maybe the term is defined as \"cat\" but you want to\nuse the plural \"cats\"? Then you can supply an optional `display` argument. The syntax is:\n{% glossary \u003cterm\u003e, display: \u003cdiplay name\u003e %}\n\nThis could be e.g.\n{% glossary cat, display: cats %}\n{% glossary some term, display: some other display text %}\n```\n\n\u003e [!WARNING]\n\u003e A term name can not contain a `,`, as this is the argument separator character.\n\n\n## CSS Style Override\nSimply modify the rules [jekyll-glossary_tooltip.css](lib/jekyll-glossary_tooltip/jekyll-glossary_tooltip.css) that you copied to your project. The tooltip is based on this [tutorial](https://www.w3schools.com/css/css_tooltip.asp). View the generated HTML output to see the HTML tags that are styled, or check the [tag.rb](lib/jekyll-glossary_tooltip/tag.rb) implementation in the method `render()`.\n\n\n## Page listing all terms\nThanks to this user submitted [idea](https://github.com/erikw/jekyll-glossary_tooltip/issues/6) we have a way to create a page listing all terms with defintions and URLs.\n\n:point_right: **Live demo**: https://erikw.github.io/jekyll-glossary_tooltip/glossary.html\n\nSteps:\n1. Install [jekyll-liquify](https://github.com/gemfarmer/jekyll-liquify) to your site according to its README instructions.\n1. Create a new page in your site similar to [glossary.md](https://github.com/erikw/jekyll-glossary_tooltip/blob/gh-pages-source/glossary.md?plain=1)\n1. Build your site and access your new page listing all terms!\n\n# Development\nThe structure of this plugin was inspired by [https://ayastreb.me/writing-a-jekyll-plugin/](https://ayastreb.me/writing-a-jekyll-plugin/), the plugin jekyll-sitemap and the [Bundler Gem tutorial](https://bundler.io/guides/creating_gem.html).\n\nAfter checking out the repo;\n1. Install [RVM](https://rvm.io/rvm/install) and install a supported ruby version (see .gemspec)\n1. run `scripts/setup` to install dependencies\n1. run `scripts/test` to run the tests\n   * Run a specific test with `bundle exec rspec -e \"name of test example\"`\n1.  You can also run `scripts/console` for an interactive prompt that will allow you to experiment.\n\nTo install this gem onto your local machine, run `bundle exec rake install`.\n\n\n## Local development\nFollowing the setup at [how-to-specify-local-ruby-gems-in-your-gemfile](https://rossta.net/blog/how-to-specify-local-ruby-gems-in-your-gemfile.html), these are the steps needed to build a jekyll site with a local clone of this plugin for local testing.\n\n1. Clone this repo to your machine, say at `~/src/jekyll-glossary_tooltip`\n1. In your Jekyll project's `Gemfile`:\n   - Remove the `gem 'jekyll-glossary_tooltip'` part\n   - Add instead `gem 'jekyll-glossary_tooltip', github: 'erikw/jekyll-glossary_tooltip', branch: 'main'`\n1. Configure bundler to use a local path for this gem in this project:\n   - `$ bundle config --local local.jekyll-glossary_tooltip ~/src/jekyll-glossary_tooltip`\n1. Update the project: `$ bundle install`\n1. Now the project will build with the local clone of this plugin when issuing e.g. `bundle exec jekyll build`\n1. When you're done:\n  - Remove the local override with: `$ bundle config --delete local.jekyll-glossary_tooltip`\n  - Optionally restore the original gem include in `Gemfile` or keep building from a branch in the github repo.\n\n## Releasing\nInstructions for releasing on rubygems.org below. Optionally make a GitHub [release](https://github.com/erikw/jekyll-glossary_tooltip/releases) after this for the pushed git tag.\n\n## Using bundler/gem_tasks rake tasks\nFollowing instructions from [bundler.io](https://bundler.io/guides/creating_gem.html#releasing-the-gem):\n```shell\nvi -p lib/jekyll-glossary_tooltip/version.rb CHANGELOG.md\nbundle exec rake build\nver=$(ruby -r ./lib/jekyll-glossary_tooltip/version.rb -e 'puts Jekyll::GlossaryTooltip::VERSION')\n\n# Optional: test locally by including in another project\ngem install pkg/jekyll-glossary_tooltip-$ver.gem\n\nbundle exec rake release\n```\n\n## Using gem-release gem extension\nUsing [gem-release](https://github.com/svenfuchs/gem-release):\n```shell\nvi CHANGELOG.md \u0026\u0026 git add CHANGELOG.md \u0026\u0026 git commit -m \"Update CHANGELOG.md\" \u0026\u0026 git push\ngem bump --version minor --tag --push --release --sign\n```\nFor `--version`, use `major|minor|patch` as needed.\n\n## Multi-versions\n* For ruby, just use RVM to switch between supported ruby version specified in `.gemspec`.\n* To run with different jekyll versions, [Appraisal](https://github.com/thoughtbot/appraisal) is used with [`Appraisals`](Appraisals) to generate different [`gemfiles/`](gemfiles/)\n   - To use a specific Gemfile, run like\n      ```shell\n      BUNDLE_GEMFILE=gemfiles/jekyll_4.x.x.gemfile bundle exec rake spec\n      bundle exec appraisal jekyll-4.x.x rake spec\n      ```\n   - To run `rake spec` for all gemfiles:\n      ```shell\n      bundle exec appraisal rake spec\n      ```\n   - To generate new/updated gemfiles from `Appraisals`\n      ```shell\n      bundle exec appraisal install\n      bundle exec appraisal generate\n      ```\n\n## Travis\nTo use the [travis cli client](https://github.com/travis-ci/travis.rb) (installed from `Gemfile`):\n1. Get a GitHub OAuth token by\n   - going to [github.com/settings/tokens](https://github.com/settings/tokens)\n   - create a new token named `travis-cli`\n   - Set the scopes `repo`, `read:org`, `user:email` according to the [docs](https://docs.travis-ci.com/user/github-oauth-scopes).\n1. Set travis.com as the default so we don't need to add `--pro` to most commands\n   ```shell\n   bundle exec travis endpoint --set-default --api-endpoint https://api.travis-ci.com/\n   ```\n1. Login with the cli client\n   ```shell\n   bundle exec travis login --github-token $GITHUB_TOKEN\n   ```\n1. Now the cli client can be used (might need `--pro` to use travis.com)\n   ```shell\n   bundle exec travis lint\n   bundle exec travis accounts\n   bundle exec travis status\n   bundle exec travis branches\n   bundle exec travis monitor\n   ```\n\n## Live Demo GitHub Pages\nThe live demo source is in the branch [`gh-pages-source`](https://github.com/erikw/jekyll-glossary_tooltip/tree/gh-pages-source). Check its `README.md`!\n\n# Contributing\nBug reports and pull requests are welcome on GitHub at https://github.com/erikw/jekyll-glossary_tooltip.\n\n# License\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n# Acknowledgement\nThanks to [ayastreb/jekyll-maps](https://github.com/ayastreb/jekyll-maps) for inspiration on project structure and options parsing!\n\n# More Jekyll\nCheck out my other Jekyll repositories [here](https://github.com/erikw?tab=repositories\u0026q=jekyll-\u0026type=\u0026language=\u0026sort=).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikw%2Fjekyll-glossary_tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferikw%2Fjekyll-glossary_tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikw%2Fjekyll-glossary_tooltip/lists"}