StickyWin.ui.pointy

docs

Similar to StickyWin.ui, this shortcut wraps your content with a default layout, the only difference being that this one has a pointer that points in the direction you specify. So, for instance:

$('su_pointy1').adopt(
  StickyWin.ui.pointy('A caption', 'Some body text. We\'ll make this long enough so it wraps so we can get a look at the tip a little taller than its minimum size.')
);

This class ships with two themes (you can define your own - see the docs). The default dark one (see example above) and a light grey one:

$('su_pointy2').adopt(
  StickyWin.ui.pointy('A caption', 'Some body text. We\'ll make this long enough so it wraps so we can get a look at the tip a little taller than its minimum size.', {
    theme: 'light'
  })
);

The pointy ui has a pointer that points up, down, left, or right. The direction option can be these directions ("up", "down", "left", or "right") or an integer between 1 and 12. These represent the positions of the hours on a clock. So direction 12 points straight up, while position 1 points up but the pointer is on the upper right corner. This goes all the way around the tip, so 5 points down with the pointer on the bottom right corner of the tip. If you pass in "up" it translates to 12. "left" is 9, "right" is 3, and "down" is 6.

$('su_pointy3').adopt(
  StickyWin.ui.pointy('A caption', 'Some body text. We\'ll make this long enough so it wraps so we can get a look at the tip a little taller than its minimum size.', {
    direction: 12 /*same as 'up'*/
  })
);

$('su_pointy4').adopt(
  StickyWin.ui.pointy('A caption', 'Some body text. We\'ll make this long enough so it wraps so we can get a look at the tip a little taller than its minimum size.', {
    direction: 1
  })
);

$('su_pointy5').adopt(
  StickyWin.ui.pointy('A caption', 'Some body text. We\'ll make this long enough so it wraps so we can get a look at the tip a little taller than its minimum size.', {
    direction: 2
  })
);

$('su_pointy6').adopt(
  StickyWin.ui.pointy('A caption', 'Some body text. We\'ll make this long enough so it wraps so we can get a look at the tip a little taller than its minimum size.', {
    direction: 3 /*same as right*/
  })
);

$('su_pointy7').adopt(
  StickyWin.ui.pointy('A caption', 'Some body text. We\'ll make this long enough so it wraps so we can get a look at the tip a little taller than its minimum size.', {
    direction: 8
  })
);

$('su_pointy8').adopt(
  StickyWin.ui.pointy('A caption', 'Some body text. We\'ll make this long enough so it wraps so we can get a look at the tip a little taller than its minimum size.', {
    direction: 10
  })
);

$('su_pointy9').adopt(
  StickyWin.ui.pointy('A caption', 'Some body text. We\'ll make this long enough so it wraps so we can get a look at the tip a little taller than its minimum size.', {
    direction: 11
  })
);

you get the idea.