Poppingjs (not publish yet)

is a tooltip & popover positioning engine which is delightfully made in pure vanila javascript without dependency what so ever.

Installation(not publish yet) #

npm i poppingjs

Imports #

import Popping from "poppingjs"
import { PoppingFlip } from "poppingjs/modifiers"
import { PoppingScroll, PoppingResize } from "poppingjs/plugins"

when one of the parent or ancestor element has position: relative; that will be the base of the tooltip positioning or else it will be the html element itself.

Create Plugin #

you can create your own plugin.

htmlcssjs
<div class="popping-container n-flat" id="pop-create-plugin">  
    <img 
        class="popping-center"
        src="/images/icons/icon-96x96.png" 
        alt="beard-guy"
        width="96"
        height="96"
        draggable={false}/>
    <div class="popping n-bg-intense">
        Drag me
    </div> 
</div>

Drag me

Flipping #

to enable flipping you must apply PoppingFlip to the modifiers

htmlcssjs
<div class="popping-container n-flat" id="pop-flipping">  
    <img 
        class="popping-center"
        src="/images/icons/icon-96x96.png" 
        alt="beard-guy"
        width="96"
        height="96"
        draggable={false}/>
    <div class="popping n-bg-intense">
        Drag me to edges 
    </div> 
</div>

Drag me to edges

Persistent #

by applying PoppingScroll(to update the dialog on every scroll) into the plugins and setting the option allowPersistent into true

htmlcssjs
<div class="popping-container popping-scroll n-flat" id="pop-persistent"> 
    <div style="height: 1000px; width: 1000px"/>
    <div class="text-center">
        <img width="96" height="96" src="/images/icons/icon-96x96.png" alt="beard-guy"/>
    </div>
    <div class="popping n-bg-intense">
        Scroll me 
    </div>
    <div style="height: 1000px"/>
</div>

Scroll me

Animated #

animating to popping when hovering or clicking.

htmlcssjs
<div class="popping-container n-flat" id="pop-animated" data-example>
    <img 
        className="popping-center"
        src="/images/icons/icon-96x96.png" 
        alt="beard-guy"
        width="96" 
        height="96"/>
    <div class="popping popping-animated n-bg-intense">
        you can see me
    </div>
</div>

you can see me

API

Popping #

Argument Argument	Type Type	Default Default	Description Description
Popping.create(
target	element \| node	-	the element you want to place your dialog.
dialog	element \| node	-	it is the element of tooltip dialog suppose to be pops next to the target.
options	object	-	the options of the popping
)

Popping Methods #

Method Method	Return Return	Default Default	Description Description
Instance.updatePosition	void	-	it is use to update the position of the tooltip dialog.
Instance.updateOptions	void	-	it is use to update options.
Instance.destroy	void	-	it is use to destroy and kill the eventListeners.

DARK THEME

Poppingjs (not publish yet)

API

Warning!