### Overlays

An overlay is a popup within the page. Technically, it is not part of the w2popup object. It is part of w2utils. However, it is described here due to its functional similarity to popups. Tags and overlays are common purpose jQuery plugins and should be called in jQuery plugin syntax.

#### $().w2tag(html, [options])

The plugin will display a tag on the right from specified element. <input id="input" onclick="$(this).w2tag('This is not valid');">

##### Preview

Click on this field
In w2form tags are used to display validation errors. The second parameter is optional and defines css class to be added to the element itself (not the tag). There can be many tags on the screen at the same time. If the element is moved, the tag will move with it. If it is destroyed, the tag will be destroyed. If you need to hide a tag, call w2tag again with empty text.
Options can be one of the following: options: { id : null, // id for the tag, otherwise input id is used html : text, // or html position : 'right', // can be left, right, top, bottom align : 'none', // can be none, left, right (only works for position: top | bottom) left : 0, // delta for left coordinate top : 0, // delta for top coordinate style : '', // addition style for the tag css : {}, // add css for input when tag is shown className : '', // add class bubble inputClass : '', // add class for input when tag is shown hideOnKeyPress : true, // hide tag if key pressed hideOnBlur : false, // hide tag on blur hideOnClick : false, // hide tag on document click onShow : null, // callBack when shown onHide : null // callBack when hidden }

#### $().w2overlay(options)

The plugin will display an overlay under (or above) the element. If element is by the edge of the screen, the overlay will be displayed in the visible portion of the page. <input id="input" onclick=" var html = '<div style=\'padding: 10px\'>This is an overlay.<br>Can be multi line HTML.</div>'; $(this).w2overlay(html)">

##### Preview

Click on this field
If first argument is a string, it will be treated as HTML to display. However, the first argument can be an object with options. If user clicks anywhere else on the screen the overlay will be hidden, which is not the same with tags. Normally, you can have only one overlay on the screen, however, you can provide a unique name if you want to display multiple overlays at the same time. Overlay supports following options: options: { name : null, // it not null, then allows multiple concurrent overlays html : '', // html text to display align : 'none', // can be none, left, right, both left : 0, // offset left top : 0, // offset top tipLeft : 30, // tip offset left noTip : false, // if true - no tip will be displayed selectable : false, // if text is selectable inside the overlay width : 0, // fixed width height : 0, // fixed height maxWidth : null, // max width if any maxHeight : null, // max height if any contextMenu : false, // if true, it will be opened at mouse position pageX : null, // pageX from event.pageX object (for contextMenu) pageY : null, // pageY from event.pageY object (for contextMenu) originalEvent : null, // original event (instead of pageX and pageY) style : '', // additional style for main div class : '', // additional class name for main div overlayStyle : '', // css style of entire overlay onShow : null, // event on show onHide : null, // event on hide openAbove : false, // show above control tmp : {} }

#### $().w2menu(options)

Displays context for the element. It is used in w2toolbar for dropdown menus and in w2grid and w2sidebar for context menus. For example: <input id="input" onclick=" $(this).w2menu({ items: [ { id: 1, text: 'Edit', icon: 'fa fa-star' }, { id: 2, text: '--'}, { id: 3, text: 'Copy', icon: 'fa fa-star' }, { id: 4, text: 'Paste', img: 'icon-page', disabled: true }, { id: 5, text: 'Hidden', img: 'icon-page', hidden: true }, { id: 6, text: '--'}, { id: 7, text: 'Delete Item', img: 'icon-page' } ], onSelect: function (event) { console.log(event); } });">

##### Preview

Click on this field
You can use any valid overlay option for the menu as well. In addition it has following options: options: { type : 'normal', // can be normal, radio, check items : [], // array of items render : null, // function (menu_item, options) - when menu item is rendered spinner : false, // indicates if to show spinner onSelect : null // function (event) - when menu item is selected search : false, // indicates if to display search control // --- only when search is true --- match : 'begins', // can be is, begins, ends altRows : false, // display alternate background color index : 0, // index of the selected item (when selected by keyboard) msgNoItems : 'No Items', // default message where no items found } The items property is an array of objects of following structure: item : { id : null, // unique id text : '', // text for the item icon : '', // icon class img : '', // image class count : null, // count badge value style : '', // additional styles hotKey : '', // text to indicate what is hot key for the item tooltip : '', // tooltip for the item hidden : false, // indicates if hidden checked : false, // indicates if menu is checked (for check and radio) disabled : false, // indicates if disabled ... // other custom properties }

#### $().w2color(options, callBack)

Displays color picker menu for the element. It is used in w2toolbar for color and text-color menus. For example: <input id="input" onclick=" $(this).w2menu({ color: '#000000', transparent: true }, function (color) { console.log('selected color is ' + color); });">

##### Preview

Click on this field