Semtip

A jQuery plugin for dynamically initializing semantic tooltips with Bootstrap or jQuery UI

Usage

.semtip()

import $ from 'jquery'
import 'semtip'

$(() => {
  $('.myTooltip').semtip()
})

A jQuery plugin for dynamically initializing semantic tooltips with Bootstrap or jQuery UI

Options

Semtip provides a couple extra options in addition to all the PhotoSwipe options.

Option	Type	Default
containerClass	string	hiddenTooltips
tooltipClass	string	term
pref	string	bootstrap
template	html (jQuery object or string)	$(document.createElement('dl')).append($(document.createElement('dt'))).append($(document.createElement('dd')))

containerClass The container where the tooltip definitions are held.

tooltipClass The class that all tooltip elements will use. Structure will follow BEM patterns. For example, a jQueryUI element might look like this:

<dl class="ui-term">
  <dt class="ui-term__title">Lorem</dt>
  <dd class="ui-term__desc">
    Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </dd>
</dl>

pref Your preferred tooltip library. Options are Bootstrap's popover.js (bs or bootstrap) or jQuery UI's tooltip (ui or jqueryui).

template The tooltip template structure. Leave this alone for term definitions.

Methods

.semtip(options)

$('.myTooltip').semtip({
  pref: 'ui',
  tooltipClass: 'myTooltip'
})

Credit

A great deal of the ES6 structure was borrowed from Bootstrap 4's plugin patterns.