neotip

how to use

• copy and paste the following into the head of your html file:

<script src="https://dugalcedo.neocities.org/neotip/neotip.js"></script>
    <!-- script defaults and global style can go in the script tags below -->
    <script>
        // store each default class as a string, e.g. '-square', '-colorRed'
        tip.defaults = [];
        // css code to be applied to all tooltips
        tip.globalStyle = '';
    </script>

• there's also a node package:

• create a tooltip by creating an element with a class of '-tip' (don't forget the dash)
• example (with a parent element):

<span>
    i'm the parent. hover me to show the tooltip
    <span class="-tip">
        i'm the tooltip
    </span>
</span>

• it will appear as something like this:

• add more classes to the class list to easily adjust and customize (don't forget the dash):
  • position (default is -sideRight)
    • -sideBottom
    • -sideLeft
    • -sideTop
    • -sideRight
  • alignment (default is -alignCenter)
    • -alignStart
    • -alignEnd
    • -alignCenter
  • dimensions
    • -w500 -w[# of pixels] (width)
    • -h500 -h[# of pixels] (height)
    • -offset50 -offset[# of pixels] (distance from parent)
    • -offsetDynamic50 (arrow size and border-radius will scale relative to offset)
    • -padding0 -padding[# of pixels]
  • colors
    • -colorRed -color[html color word]
    • -hexColorff0000 -hexColor[hex color without #]
    • -bgLime -bg[html color word]
    • -hexBg00ff00 -hexBg[hex color without #]
  • shadow
    • -shadow
    • -shadow2-2-2-black -shadow[x-y-radius-html color word]
    • -hexShadow3-3-0-000000 -hexShadow[x-y-radius-hex color without #]
  • contrast
    • -highContrast
    • -highContrastDark
  • fade transition
    • -fade (enables the fade transition)
    • -duration1000 -duration[# of milliseconds]
    • -delay500 -delay[# of milliseconds] (sets both in- & out-delay to this value)
    • -delayIn250 (only sets the in-delay)
    • -delayOut1000 (only sets the out-delay)
    • -delays250-1000 (sets both, with different values)
  • other
    • -square (unrounded corners)
    • -noArrow (remove arrow)
    • -glass (translucent white with blur)
    • -z25 -z[z-index value]
    • -fontSize16 -fontSize[# of pixels]
    • -arrSize16 -arrowSize[# of pixels]
    • -arrColorRed -arrColor[html color name]
    • -arrHex00ffff -arrHex[hex color without #]
    • -edge (for -alignStart and -alignEnd, allow arrow to move all the way to the edge of the tooltip [adding -square recommended])

• feel free to use inline styling on any tooltip element
• style hierarchy: inline > global > class params > linked css
• you can set global classes in the 'tip.defaults' array in the empty script tags, as shown above
• example: tip.defaults = ['-square', '-noArrow', '-highContrast']
• you can set a global style in the 'tip.globalStyle' string
• example: tip.globalStyle = 'border: 1px solid black; font-weight: 800;'
• note: adding display, opacity, and/or transform properties here may cause bugs
• you can re-render all tooltips by calling tip.reset()
• for dynamically-rendered elements, you can call tip.process(node) to handle elements loaded after the initial DOM load
• if that's buggy, try calling tip.reset() afterwards
• if your tooltip is popping up way too far from the parent, inspect the parent's width and height to rule that out
• contact me:
  • discord: dug#2840
  • email: dougalcedo@gmail.com