Position a container around the edge of another. The screenshot below shows all its positioning options. I have added basic styling in the screenshot to make the satellites visible. However out of the box it comes with no styling opinions. This project is based off component/tip which I found to be widely useful outside of tooltips. This is an extraction of the core functionality from that project, enhanced to suit my more general use cases. For an example use case see
var satelite = require('satellite')
- Satellite()
- Satellite.new()
- Satellite.append()
- Satellite.attach()
- Satellite.appendTo()
- Satellite.cancelHideOnHover()
- Satellite.effect()
- Satellite.prefer()
- Satellite.orbit()
- Satellite.show()
- Satellite.hide()
- Satellite.remove()
Initialize a Satellite
with the given content
.
new Satellite('moon')
Alternative constructor
Insert content into the satellite's body
Attach to the given el
with optional hide delay
.
Insert the satellite as a child
Cancel hide on hover, hide with the given delay
.
Get current effect or set the effect to type
.
fade
Set position preference:
north
north east
north west
south
south east
south west
east
west
Calculate or set the target area
To target an element:
var target = document.querySelector('#target')
satellite.orbit(target)
To specify an explit target area:
satellite.orbit(target.getBoundingClientRects())
To specify a point:
satellite.orbit(100, 100)
Show the Satellite attached to el
.
Emits "show" (el) event.
Hide the Satellite with optional ms
delay.
Emits "hide" event.
Hide then destroy