bubb

 
// yarn add bubb | npm i --save bubb
const bubb = require('bubb');

 
const config = {
  bubble: {
    text: 'content',
    _: {
      // ... bubble options
    }
  },
  bobble: {
    menu_item_1: 'content',
    menu_item_2: 'content',
    _: {
      // ... bobble options
    }
  },
  _: {
    // ... global options
  }
}
 

 
callback: false
  // function(){} overrides initial (or global) callback
  // boolean true adds click listener and reports to default callback
 
transitionOff: false
  // boolean
 
interactive: false
  // boolean, default true for menus and option callback
 
hoverCallback: false
  // boolean, trigger callback on element:hover
 
delay: false
  // int value, microseconds reveal delay
 
autoHide: false
  // false or milliseconds
 
toggle: false
  // boolean, activate tooltip with function call bubb.toggle(key)
 
direction: false
  // string 'north', 'west' or 'east' (default false = 'south')
 
autoDirection: false
  // boolean, screen edge proximity aware direction change
 
anchor: false
  // string 'left' or 'right' (default false = 'centered')
 
width: false
  // int value <= 100 (document width percentage)
  // css string with units (eg. '300px')
  // querySelector string (eg. 'section:first-of-type')
 
borderRadius: '4px'
  // css string with units
 
fontSize: '17px'
  // css string with units
 
background: '#444'
  // css color string
 
color: '#fff'
  // css color string
 
class: false
  // string, className to target current bubb specifically
 
 

 
bubb.refresh();
  // initialize new data-bubb elements added to DOM
 
bubb.update(reference, content | options);
 
bubb.update(menu_reference, options);
bubb.update(menu_reference.menu_item, content);
 
bubb.add(menu_reference.menu_item, content);
bubb.remove(menu_reference.menu_item);
  // these methods adds or removes DOM elements