====== StickyWin.ui.pointy ====== [[http://www.clientcide.com/docs/UI/StickyWin.ui.pointy|docs]] Similar to [[10-stickywin.ui|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.')
);

===== Themes ===== 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'
  })
);

===== Pointer Direction ===== 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.