bip-tour v1.1.3

Attract your user interest with Bip-Tour

Installation

    npm install bip-tour

How to use it

• With webpack import

    import Bip from 'bip-tour'
    let bip = new Bip(10, 20);
    bip.show()

• Inline mode

  <script src="./node_modules/bip-tour/dist/bips.js"></script>

    // in your js
    let bip = new window.Bip(10, 20)
    bip.show() // show bip 

Api

• Constructor
  • x : Position from left
  • y : Position from top
  • color (optional) : The Dot color (string)
  • message (optional) : An object - html : The content in html - bgColor : The background color of the message box - color : The Text color of the message box

    Example

    new Bip(100, 200, "red", {html: "I'm a red dot with blue message box", bgColor: "blue", color: "white"})
    new Bip(300, 300, "rgba(0,0,0,0.5)", {html: "I'm a dark dot"})

• byId static method: (set dot for a given element by its id)
  • id : The id of html element
  • color (optional) : The Dot color (string)
  • message (optional) : An object
    • html : The content in html
    • bgColor : The background color of the message box

    • color : The Text color of the message box

  Example

    <button id="new-feature">My new Feature</button>

    let bip = Bip.byId("new-feature")
    bip.show()
    // or
    Bip.byId("new-feature").show()

• selector static method (Returns and array of Bip)
  • selector : The html selector (string)
  • color (optional) : The Dot color (string)

  • message (optional) : An object

    • html : The content in html
    • bgColor : The background color of the message box
    • color : The Text color of the message box

  Example

    <button class="new-feature">My new Feature</button>
    <button class="new-feature">My new Feature</button>
    <button class="new-feature">My new Feature</button>
    <button class="new-feature">My new Feature</button>

    let bip = Bip.selector(".new-feature")
    bip.forEach((b) => b.show())
    // or
    Bip.selector(".new-feature").forEach((b) => b.show())

• hide : Hide a dot

  Example

     let bip = new Bip(300, 100, 'red', {html: "Hello i'm a new feature"})
     bip.show() // show it
     bip.hide() // hide it

---
- remove : Remove a dot
#### Example 
 ```js
    let bip = new Bip(300, 100, 'red', {html: "Hello i'm a new feature"})
    bip.show() // show it
    bip.remove() // remove it