https://github.com/mrmartineau/koglossarylinks
KOglossaryLinks is a jQuery plugin that shows tooltips of glossary terms, from a JSON feed, when hovered (or tapped on touchscreen devices)
https://github.com/mrmartineau/koglossarylinks
Last synced: 4 months ago
JSON representation
KOglossaryLinks is a jQuery plugin that shows tooltips of glossary terms, from a JSON feed, when hovered (or tapped on touchscreen devices)
- Host: GitHub
- URL: https://github.com/mrmartineau/koglossarylinks
- Owner: mrmartineau
- License: mit
- Created: 2015-02-12T23:26:11.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-02-26T17:25:39.000Z (over 10 years ago)
- Last Synced: 2025-01-31T08:36:30.123Z (5 months ago)
- Language: CSS
- Homepage:
- Size: 164 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# KOglossaryLinks jQuery plugin
This is a jQuery plugin that shows glossary-style tooltips when hovered (or tapped on touchscreen devices). You provide a json feed and add data attributes to any HTML element and it will do the rest.
The plugin handles different screen dimensions with ease; it repositions the tooltip horizintally so that it can keep it in view. It does not reposition the tooltip vertically if there is not enough vertical height.
A slightly older version of this plugin was used on http://www.goenergyshopping.co.uk/en-gb/why-shop
## Getting the Library
### Direct downloads
- [Minified](https://raw.githubusercontent.com/mrmartineau/KOglossaryLinks/master/dist/jquery-KOglossaryLinks.min.js) (1.31 kB gzipped)
- [Unminified](https://raw.githubusercontent.com/mrmartineau/KOglossaryLinks/master/dist/jquery-KOglossaryLinks.js) (5.15 kB gzipped)
### Bower
`bower install KOglossaryLinks`
### NPM
`npm install koglossarylinks --save`
## Usage
Include **KOglossaryLinks** in your JavaScript bundle or add it to your HTML page like this:
```html
```
### Example HTML usage:
```html
Glossary term
```
### Example JS usage:
```js
$(document.body).KOglossaryLinks({
sourceURL : 'glossary.json',
tooltipwidth : 260,
debug : true
});
```
## Default options:
```
sourceURL : '' [string] - URL of the JSON file with format {"term": "", "description": ""}
tooltipwidth : 260, [integer] - Width of tooltip. This should correspond to the CSS you are using for the tooltip
debug : false [boolean] - Show debug messages in the console
```
## JSON feed
The json feed should look like this:
```json
[
{
"term": "Glossary Term 1",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
},
{
"term": "Glossary Term 2",
"description": "Non nemo totam a voluptatibus modi sunt earum."
}
]
```
### CSS Styling
As well as the bundled CSS there is a `.scss` file included which can be edited. If you use Sass, include it in your build and modify the styles.
## Demo
View a demo at http://codepen.io/mrmartineau/pen/KweMqr