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 )

pointerType Required

PointerType

A string that actually (0.2.3) 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

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 )

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

Free pointer

I'm a div and a pointer! ➡️

Uses an HTML or SVG element as a pointer.

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

create ( 'free', options )

pointerElement Required

HTMLElementSVGElementstring

Element to use as a pointer or any kind of CSS selector (string).

fromAngle Default: 'right bottom'

number'top''bottom''right bottom''right''left bottom''left''left top''right top'

From which direction the pointers points to the target (clockwise angle in degrees if number is given)

distance Default: 0

number

Distance in pixels between the pointer and the center of the target

animate Default: false

false'pulse'AnimationOptions

See animations

responsive Default: false

false'rotate''scale'ReponsiveArrowOptions

See responsive

Examples

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

create('free', {
    target: '#box-f1',
    pointerElement: '#sword', 
    container: 'main'
})

#box-f1

create('free', {
    target: '#box-f2',
    pointerElement: '#div-pointer',
    container: 'main',
    transformOrigin: 'right',
    fromAngle: 160,
    distance: 20,
    animate: 'pulse'
})

#box-f2

Arrow

A kind of free pointer that uses a procedurally generated SVG arrow as pointer element. Has SVG options and the free pointers options (except pointerElement).

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: 'right top',
    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