frdnrdb / Bubb

Non-dependent, non-fancy javascript infotip. No CSS needed.

• 2.0.1 Options: toggle, autoDirection, autoHide
• next Mobile solution

Usage

→ See some examples

<script src="bubb.min.js"></script>

<this data-bubb="bubble">info</this>
<that data-bubb="bobble">menu</that>

<script>

  const config = {
    bubble: 'simple bubb with <i>html</i> or text content',
    bobble: {
      jimi: 'hendrix',
      noel: 'redding',
      mitch: 'mitchell'
    }
  }

  const callback = (key, el) => {
    console.log(key); // eg. 'bubble' or 'bobble.mitch'
  }

  bubb(config, callback)

</script>

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

Options setup

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

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

Methods

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

Style overrides

The content is targeted through bubb-content > div. The trigger element gets className .bubb (and .bubb-menu). The bubb(le) tagname is bubb-bobb.

Browser Support et cetera

Missed that train. Feel free to contribute if you're on board.