Godfather

A man who doesn't spend time with his customers can never be a real man.

Simple vanilla plugin to create good & beautiful onscreen-guides.

Demo

Check out a simple demo

Installation

npm install godfather

Wrappers

• Vue – vue-godfather

API

Function	Description	Return
register(id, target, options) -> check "Parameters" for more info	Register a new guide entry	Instance
unregister(id)	Unregister a guide entry	–
show(id)	Show a guide	–
hide(id)	Hide a guide	–
setDefault(options)	Change the default options	–

Parameters

id

Type	Description
String	Set an unique id for identification

target

Guides can be attached to DOM elements

Type	Description
String	Selector
Object	DOM-Element

options

This plugin can be customized, the following options are enabled:

Key	Type	Description	Default
title	String	The displayed title	null
content	String	The displayed content	null
image	String	The displayed image	null
hint	Boolean	Adds a small hint to the target	false
attachTo	String	Define where the tooltip should attach. Values are: "hint", "element", DOM element	"element"
placement	String	Defines the placement of the tooltip element	auto
scrollIntoView	Boolean	Scrolls the guide into view	true
clickAway	Boolean	Cancel guiding if user clicks outside guide element	true
prev	Function	Function to be executet on prev	null
next	String, Function	id of the next guide to show or function to be executet	null
overlay	Boolean	add an overlay on the background and highlight the target	false
theme	Object	...	...
└-- background	String	Hex or rgb background	"#222"
└-- color	String	Hex or rgb text color	"white"
labels	Object	...	...
└-- prev	String	label for prev button	"<"
└-- next	String	label for next button	">"
└-- close	String	label for close button	"✕"

Instance object

The register method return an instance of the Godfather entry with the following functions.

Function	Description
unregister()	removes the entry
show()	shows the entry
hide()	hides the entry
addEventListener(event, callback)	hook to predefined events: "show", "hide", "close", "prev", "next"

Example

let entry = Godfather.register("don", ".sample-selector", {
  title: "Don Vito Corleone",
  content: "I'm gonna make him an offer he can't refuse",
  image: "don-vito-corleone.png",
  hint: true,
  next: "michael",
});

Godfather.show("don");

entry.unregister();
entry.addEventListener("close", (e) => e.unregister());
entry.removeEventListener("close", (e) => e.unregister());

Development & Testing

npm run dev starts webpack with watch mode.

License

The MIT License Copyright (c) Carsten Jacobsen