🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery plugin that dynamically points one element at another.Pointy will create an arrow, at any angle, pointing from the pointer to the pointee (Pointy).Minimal setup with only one required option – setting the pointer.The background & border color of the arrow will automatically be matched to the pointer, unless overriding options are set.Additional options allow setting the arrow base width & border width.

Plugins

Documentation

Pointy Bower Version NPM Version devDependency Status

A jQuery plugin that dynamically points one element at another.

Features

  • Pointy will create an arrow, at any angle, pointing from the pointer to the pointee (Pointy).
  • Minimal setup with only one required option - setting the pointer.
  • The background & border color of the arrow will automatically be matched to the pointer, unless overriding options are set.
  • Additional options allow setting the arrow base width & border width.

Notes

  • jQuery v1.7+ is the only dependency.
  • jQuery UI draggable is used in these demos, but any draggable plugin may be used.
  • The outer width & height of the elements is used in calculation, so any margin on the pointer will offset the arrow placement.
  • Canvas is used to add an arrow which points from one element to another, so there is limited css effect on the arrow background & border colors.

To Do

  • Allow multiple pointers per pointee.

Setup

<script src="js/jquery.min.js"></script> <!-- using jQuery UI draggable --> <script src="js/jquery-ui.min.js"></script> <script src="js/jquery.pointy.js"></script> <script> $(function(){    // $pointer points at $pointy   var $pointer = $('.label.pointer'),      // initialize pointy (showing all options; but not all defaults)     $pointy = $('.repo-name').pointy({       pointer      : $pointer,       arrowWidth   : 10, // width of pointer base       borderWidth  : 1,  // pointer stroke width       flipAngle    : 45, // angle @ which to flip pointer to a closer side       defaultClass : '', // additional class name added to the pointer & the arrow (canvas)       activeClass  : 'pointy-active', // class added to base & pointer on updating        // optional; if not set, plugin will attempt to match the base color       borderColor     : null,       backgroundColor : null,        // tweaks       useOffset : null     });    // Using jQuery UI draggable (any draggable code will work)   $label.draggable({     containment : '.top',     drag : function() {       $pointy.trigger('pointy-update');     }   });  }); </script>

Documentation & Demos

Version

v1.0.2-beta (3/22/2016)

  • Docs: correction to "trigger" destroy method.
  • Update dependencies.
  • Add repo to bower.

v1.0.1-beta (4/28/2015)

  • Fix npm package name.
  • Add pointer-events:none to canvas; this allows clicking through the pointy arrow.
  • Update keyboard demo code to refresh pointy arrow on textarea resize.
  • Update jQuery to v1.11.2.

v1.0.0-beta (3/14/2015)

  • Initial release

You May Also Like