https://github.com/rohberg/volto-slate-glossary

Tooltip per glossary term
https://github.com/rohberg/volto-slate-glossary

plone volto volto-addon

Last synced: about 2 months ago
JSON representation

Tooltip per glossary term

• Host: GitHub
• URL: https://github.com/rohberg/volto-slate-glossary
• Owner: rohberg
• Created: 2021-05-01T07:53:46.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-24T20:01:00.000Z (3 months ago)
• Last Synced: 2024-10-25T01:34:37.447Z (3 months ago)
• Topics: plone, volto, volto-addon
• Language: JavaScript
• Homepage:
• Size: 1.83 MB
• Stars: 3
• Watchers: 2
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-volto - volto-slate-glossary - Tooltips for glossary terms (Addons)

README

        
# @rohberg/volto-slate-glossary

Volto add-on `@rohberg/volto-slate-glossary` adds tooltips for glossary terms of [collective.glossary](https://github.com/collective/collective.glossary)

[![npm](https://img.shields.io/npm/v/@rohberg/volto-slate-glossary)](https://www.npmjs.com/package/@rohberg/volto-slate-glossary)

[![Unit tests](https://github.com/rohberg/volto-slate-glossary/actions/workflows/unit.yml/badge.svg)](https://github.com/rohberg/volto-slate-glossary/actions/workflows/unit.yml)

[![Code analysis checks](https://github.com/rohberg/volto-slate-glossary/actions/workflows/code.yml/badge.svg)](https://github.com/rohberg/volto-slate-glossary/actions/workflows/code.yml)

![Tooltips @rohberg/volto-slate-glossary](https://github.com/rohberg/volto-slate-glossary/raw/main/docs/volto-slate-glossary-tooltips.png)

Install Plone add-on [collective.glossary](https://github.com/collective/collective.glossary) in your backend.

This provides the content type `glossary`.

Determine where to apply tooltips in your project by match configuration:

```js

    import { Tooltips } from '@rohberg/volto-slate-glossary/components';

    export default function applyConfig(config) {

        config.settings.appExtras = [

            ...config.settings.appExtras,

            {

            match: '/documentation',

            component: Tooltips,

            },

            {

            match: '/news',

            component: Tooltips,

            },

        ];

        return config;

    }

```

By default we show a tooltip when a word matches case insensitively: when the term is "Hello" or "hello", a tooltip is shown for "Hello", "hello", "HELLO", "hElLo", etcetera.

You can configure this to be case sensitive for all terms, so "Hello" only matches for "Hello":

```js

config.settings.glossary.caseSensitive = true;

```

Regardless of this setting, when you have a fully uppercase term, for example `REST` (Representational State Transfer), always only the exact word `REST` gets a tooltip, not `rest` or `Rest`.

By default we show tooltips for all occurrences of a term.

Since version 2.0.0 you can configure to only show tooltips for the first occurence on a page.

```js

config.settings.glossary.matchOnlyFirstOccurence = true;

```

User can opt-out by setting glossarytooltips to false.

Add a boolean member field *glossarytooltips* for it.

## Further configurations

Hide alphabet navigation of glossary view:

```js

config.settings.glossary.showAlphabetNavigation = false;

```

Show glossary term in tooltips header:

```js

config.settings.glossary.mentionTermInTooltip = true;

```