The JavaScript blog.


libraries validation node dom browser tooltips selector

Voyeur, Page Notes, Validator

Posted on .



Voyeur (GitHub: dunxrion / voyeur.js, License: MIT) by Adrian Cooney is a DOM traversal and manipulation library. It creates window.Voyeur, which wraps around document.body. Then Object.defineProperty is used to add getters to nodes that are accessed through Voyeur. That means Voyeur.element.child.child.fn() can be used to access elements and perform operations on them. Elements can be created with the same syntax.

Methods are provided for working with elements. For example, use allows several operations to be performed on the same element:

Voyeur.div.ul.li.use(function(li, i) {  
  li.innerText = 'Hello';

Tags can be inserted by using the create method, and this can be combined with use:

Voyeur.ul.li.eq(3, 9).use(function(li, i) {  
  li.create.em.innerText = 'Emphasized text!';

The author has included tests and a Grunt build script.

Page Notes

Page Notes (pagenotes.js, License: MIT) by Jim Williams is a client-side script for working with a flexible implementation of tooltips that support rich annotation-like styles:

Page notes are a very general, highly intuitive generalization of tooltips. When the mouse stops over a tooltip target, a target annotation is embedded in a tooltip skin and displayed according to a placement specification. The skin together with the placement specification constitute the tooltip template. And the resulting displayed tooltip is the page note. No user-supplied JavaScript is involved.

Since tooltips are HTML fragments, they can also contain tooltips, which allows the library to support nested annotations. Attributes are used to configure tootips. For example, placement can be used to position the container.


Validator (GitHub: Nijikokun / Validator, License: MIT, npm: schema-validator) by Nijiko Yonskai is a Node module with browser support that allows data to be validated using a simple JSON schema:

var schema = {  
  username: {
    type: 'String',
    required: true,
    length: {
      min: 3,
      max: 36
    test: /^[a-z0-9]+$/gi

var validator = new Validator(schema);  
var check = validator.check({  
  username: 'Niji%kokun'


The Validator constructor can return an object that will work as Express middleware, which allows routes to validate data and populate the req.validated property. New validators can be added using Validator.implement.


jquery plugins tooltips galleries

jQuery Roundup: grumble.js, miniTip, Mosaiqy

Posted on .

Note: You can send your plugins and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/dailyjs).


grumble.js (GitHub: jamescryer / grumble.js) by James Cryer and Huddle.com is a very flexible tooltip library:

A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There's auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles.

It uses CSS3, but will use Microsoft's proprietary filters for IE6+.

The example seen on the site's homepage works like this:

    text: 'Bubble-tastic!', 
    angle: 85, 
    distance: 100, 
    showAfter: 500 


miniTip (GitHub: goldfire / miniTip, License: MIT and GPL) by James Simpson is a lightweight tooltip
plugin. This one uses title attributes to display neat little tooltips.

There are options for customising the content, delay, events,
animations, but the most basic usage is just


Mosaiqy (GitHub: fcalderan / mosaiqy, License: CC BY-ND
) by Fabrizio
Calderan is a plugin for displaying images in a grid and manipulating
them with animations. HTML5 and JSON/JSONP are used for the templates
and data. CSS3 hardware acceleration is used where available, and it
will fetch data from popular sites like Flickr and Instagram.

Full details of usage and configuration options can be found at