Skip to content

Latest commit

 

History

History
111 lines (83 loc) · 4.14 KB

README.md

File metadata and controls

111 lines (83 loc) · 4.14 KB
Raw

Javascript Tests Publish to NPM

Aristotle Cloud Services Australia

Aristotle Tooltip

A highly customisable and easy to use way to insert Aristotle powered definitions to your website!

Features

  • ✔️ Adaptable: use any Aristotle Metadata Registry!
  • 🌐 IE11+ Support * : compatible with 99% of desktop and 98% of mobile users.
  • 🐭 Light: weighs just 60kb, including image assets.
  • 🐶 Dogfooded: This library is used in our production Aristotle Registries. Updates guaranteed!

Example

Image

Quick Start

Package Manager

Install the aristotle-tooltip package:

frankie@aristotle:~$ npm i @aristotle-metadata-enterprises/aristotle_tooltip

In your application, import the aristotle_tooltip module, and the core css:

import aristotleTooltip from '@aristotle-metadata-enterprises/aristotle_tooltip'
import 'aristotle_tooltip/dist/tooltip.css'

This assumes you're using a module bundler like Webpack, Rollup or Parcel.

CDN

<script src="https://cdn.jsdelivr.net/npm/@aristotle-metadata-enterprises/aristotle_tooltip@latest/dist/aristotletooltip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aristotle-metadata-enterprises/aristotle_tooltip@latest/dist/tooltip.css">

Place the script at the very bottom of the <body>. It must be placed before your own scripts, because of how the underlying Tippy.js library adds the tooltips.

Usage

To add a tooltip for a piece of content on your webpage:

A <a href="#" data-aristotle-concept-id="498427">person</a> is known by the company they keep

Custom styling for Aristotle links can set by applying CSS rules that target attribute decorators:

a[data-aristotle-concept-id] {
  border-bottom: 1px dotted #155799;
}
a[data-aristotle-concept-id]:hover {
  text-decoration: none;
  border-bottom: 1px solid #155799;
}

Setup

let options = {
  'url': 'https://registry.aristotlemetadata.com',
  'definitionWords': 50,
  'longDefinitionWords': 75,
};
aristotleTooltip(options);

Options

Option Default Explanation
url registry.aristotlemetadata.com The URL of an Aristotle Metadata Registry
definitionWords 50 The number of words to display in the initial popup
longDefinitionWords 75 The number of words to display when 'see more..' is pressed
placement bottom The positioning of the tooltip
trigger mouseenter focus Events used to trigger the tooltip
externalLinkVisible true Whether to display an external link icon next to the name of the metadata item
selector document.body Element or css selector for creating tooltips under, tooltips not under this element will be ignored
interactive true Whether interactive content such as links should be displayed

Setting up a Development Environment

We're an open source project that welcomes any new contributions. To setup a development environment, simply fork the repo, clone it locally, and from within the aristotle-tooltip project, run:

oscar@aristotle:~$ npm install
oscar@aristotle:~$ npm run build:dev

IE11 Compatibility

A Promise polyfill is required for IE11 compatibility.aristotle-tooltip has been tested to work with ES6 Promise

ES6 Promise with a CDN

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>