Creating pointers

In Point it out, we call "pointer" to created and absolutely positioned elements via the create() function.

import { create } from 'pointitout' 

create('rect', { target: '#target-css-selector' })

Common params and options for all pointers

create ( pointerType, options )

Name
Type/s
Description
pointerType Required
PointerType
A string that actually (0.2.0) can only be 'rect' or 'arrow'.
options Required
CreateOptions
An object whose properties depend on pointerType. Only the common ones for all pointers are described below.
target Required
HTMLElementstring
The element to point out. Can be a direct reference (HTMLElement) or any kind of CSS selector (string).
container Default: document.body
HTMLElementstring
Container where append the pointer. A reference or CSS selector string. NOTE: The container should have the position property set to a value different to the default static.
className Default: undefined
stringstring[]
Class/classes to add to the new pointer element.
zIndex Default: 9999
number
The z-index style property for the new created element

Common params and options for all SVG pointers

SVGOptions

Name
Type/s
Description
strokeWidth Default: 4
number
Stroke (the outline line) width in pixels.
strokeColor Default: 'darkorange'
string
Stroke (the outline line) color. A SVG/CSS valid color string i.e '#aa23c8' or 'rgba(211, 17, 32, 0.5)'.
fillColor Default: 'orange' ('none' in rects)
string
SVG fill color (to fill the shape). A SVG/CSS valid color string i.e '#aa23c8' or 'rgba(211, 17, 32, 0.5)'.
TIP: You can access the created SVG, so you can actually modify any of its styles by CSS properties, but be careful with those properties that alter the size, since Point it out will not recalculate an appropriate container size for it.

Rect

The first and most basic pointer. In addition to the options described above, this pointer has the following specific options:

create ( 'rect', options )

Name
Type/s
Description
round Default: 0
numberstringobject
Round borders as number (pixel), a string with any valid SVG value (i.e '20%') or an object with rx and ry properties explained below.
rx Default: 0
numberstring
Round applied to horizontal axis.
ry Default: 0
numberstring
Round applied to vertical axis.
padding Default: 0
numberobject
How separated (in pixels) from the target content is the rect. Can be negative. By default (0 padding) the rect surrounds perfectly the target's bounding rect.
x Default: 0
number
Horizontal gap (left and right)
y Default: 0
number
Vertical gap (top and bottom)
animate Default: false
false'pulse'AnimationOptions
See animations

Examples

Notice the use of "container" option to create the SVG inside the <main> element instead body, avoiding issues with the scrollable main.

create('rect', {
    target: '#box-1', 
    container: 'main',
    padding: 8,
    animate: 'pulse'
})
#box-1
create('rect', {
    target: '#box-2', 
    container: 'main',
    strokeWidth: 8,
    strokeColor: '#68c'
})
#box-2
create('rect', {
    target: '#box-3', 
    container: 'main',
    strokeColor: '#f8c',
    round: '30%',
    padding: 12
})
#box-3

Arrow

In addition to the common options for all pointers and SVG described above, this pointer has the following specific options:

create ( 'arrow', options )

Name
Type/s
Description
fromAngle Default: 'bottom-right'
number'top''bottom''bottom-right''right''bottom-left''left''top-left''top-right'
From which direction the arrow points to the target (clockwise angle in degrees if number is given)
distance Default: 0
number
Distance in pixels between the arrow and the center of the target
animate Default: false
false'pulse'AnimationOptions
See animations
responsive Default: false
false'rotate''scale'ReponsiveArrowOptions
See responsive arrows
Recently added and working on it. Very few configuration options yet.

Examples

Notice the use of "container" option to create the SVG inside the <main> element instead body, avoiding issues with the scrollable main.

// Default: bottom-right orange 
// arrow without stroke
create('arrow', {
    target: '#box-1b', 
    container: 'main'
})
#box-1b
create('arrow', {
    target: '#box-2b', 
    container: 'main',
    strokeWidth: 8,
    strokeColor: '#46a',
    fillColor: '#8bf',
    fromAngle: 150,
    animate: 'pulse'
})
#box-2b
create('arrow', {
    target: '#box-3b', 
    container: 'main',
    fillColor: '#7f7',
    fromAngle: 'top-right',
    distance: 50
})
#box-3b

Pointer references

The create function returns a reference to a Pointer instance, an object with some useful methods to manipulate it. Also contains a reference to the target element and the created raw HTMLElement.

import { create } from 'pointitout' 

const pointer = create('rect', { target: '#target-element-id' })

// You can access to the target element and the raw 
// created HTMLElement from this object if you need
console.log(pointer.target) 
console.log(pointer.htmlElement)

// Some pointers method. See next sections.
pointer.update() // Update the pointer
pointer.destroy() // Destroy the pointer