[ KAWWA PORTAL ] Components : Field Comment

Forms

Field Comment

Class name: (k-field-comment)
Version: 1.1
jQuery Interactive feature
Tapestry Integration
Angular Integration

Add to list

Use this component to give the user a short description or explanation of an input field.

The value of the "title" attribute given to the input will open in a tooltip.

Demo
Snippets
Tapestry Integration
Angular Integration

Enter something:

HTML5 Plain Code

COPY

<p><label for="field1">Enter something:</label>

	<input class="k-field-comment" type="text" id="field1" name="field1" title="A short comment about this field" /></p>

CSS Code

COPY

```
.tipsy {
```
```
	position: absolute;
```
```
	font-size: 90%;
```
```
	background-repeat: no-repeat;
```

	background-image: url(../img/k-theme0/tipsy.gif);

```
    padding: 5px;
```
```
	z-index: 100000;
```
```
}
```

.tipsy-north {background-position: top center;}

.tipsy-south {background-position: bottom center;}

.tipsy-east {background-position: right center;}

.tipsy-west {background-position: left center;}

```
.tipsy-inner {
```
```
	background-color: #000;
```
```
	color: #FFF;
```
```
	max-width: 200px;
```
```
	padding: 5px 8px 4px 8px;
```
```
	text-align: center;
```
```
}
```
```
.tipsy-arrow {
```
```
	position: absolute;
```
```
	width: 0;
```
```
	height: 0;
```
```
	line-height: 0;
```
```
	border: 5px dashed #000;
```
```
}
```
```
/* Rules to colour arrows */
```
```
.tipsy-arrow-n {
```
```
	border-bottom-color: #000;
```
```
}
```
```
.tipsy-arrow-s {
```
```
	border-top-color: #000;
```
```
}
```
```
.tipsy-arrow-e {
```
```
	border-left-color: #000;
```
```
}
```
```
.tipsy-arrow-w {
```
```
	border-right-color: #000;
```
```
}
```
```
.tipsy-n .tipsy-arrow {
```
```
	top: 0px;
```
```
	left: 50%;
```
```
	margin-left: -5px;
```
```
	border-bottom-style: solid;
```
```
	border-top: none;
```
```
	border-left-color: transparent;
```
```
	border-right-color: transparent;
```
```
}
```
```
.tipsy-nw .tipsy-arrow {
```
```
	top: 0;
```
```
	left: 10px;
```
```
	border-bottom-style: solid;
```
```
	border-top: none;
```
```
	border-left-color: transparent;
```
```
	border-right-color: transparent;
```
```
}
```
```
.tipsy-ne .tipsy-arrow {
```
```
	top: 0;
```
```
	right: 10px;
```
```
	border-bottom-style: solid;
```
```
	border-top: none;
```
```
	border-left-color: transparent;
```
```
	border-right-color: transparent;
```
```
}
```
```
.tipsy-s .tipsy-arrow {
```
```
	bottom: 0;
```
```
	left: 50%;
```
```
	margin-left: -5px;
```
```
	border-top-style: solid;
```
```
	border-bottom: none;
```
```
	border-left-color: transparent;
```
```
	border-right-color: transparent;
```
```
}
```
```
.tipsy-sw .tipsy-arrow {
```
```
	bottom: 0;
```
```
	left: 10px;
```
```
	border-top-style: solid;
```
```
	border-bottom: none;
```
```
	border-left-color: transparent;
```
```
	border-right-color: transparent;
```
```
}
```
```
.tipsy-se .tipsy-arrow {
```
```
	bottom: 0;
```
```
	right: 10px;
```
```
	border-top-style: solid;
```
```
	border-bottom: none;
```
```
	border-left-color: transparent;
```
```
	border-right-color: transparent;
```
```
}
```
```
.tipsy-e .tipsy-arrow {
```
```
	right: 0;
```
```
	top: 50%;
```
```
	margin-top: -5px;
```
```
	border-left-style: solid;
```
```
	border-right: none;
```
```
	border-top-color: transparent;
```
```
	border-bottom-color: transparent;
```
```
}
```
```
.tipsy-w .tipsy-arrow {
```
```
	left: 0;
```
```
	top: 50%;
```
```
	margin-top: -5px;
```
```
	border-right-style: solid;
```
```
	border-left: none;
```
```
	border-top-color: transparent;
```
```
	border-bottom-color: transparent;
```
```
}
```

How to apply

COPY

```
(function($){
```
```
	'use strict';
```
```
	$(document).ready(function(){
```
```
		if ($.fn.tipsy) {
```
```
			$('.k-field-comment').tipsy({
```
```
				gravity: 'w',
```
```
				fade: true,
```
```
				trigger: 'focus'
```
```
			});
```
```
		}
```
```
	});
```
```
})(jQuery);
```

For more information about how to apply this plug-in, its options, events and methods, see the Tipsy Tooltip page.

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

If you want to use the Field Comment component, you will use the tipsy mixin available in the Kawwa library. It will automatically use the title attribute of the input for the description.

Tipsy parameters
Name	Required	Java Type	Default Prefix	Default Value	Description
options	false	JSONObject	literal		The JSON option for the jQuery widget.

The Template

COPY

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"

```
	xmlns:p="tapestry:parameter">
```

 	<t:form t:clientValidation="false" t:id="form">

```
 		
```

 		<t:textfield t:id="value" t:mixins="kawwa2/tipsy"

```
 			t:options="prop:options"
```

 			title="title which will be displayed !" />

```
 		
```
```
 	</t:form>
```
```
</html>
```

Java Implementation

COPY

package net.atos.kawwaportal.components.test.pages;

import org.apache.tapestry5.annotations.Property;

import org.apache.tapestry5.json.JSONObject;

```
public class Form {
```
```
	
```
```
	@Property
```
```
	private String value;
```
```
	
```
```
	public JSONObject getOptions(){
```

		return new JSONObject("gravity", "n");

```
		
```
```
	}
```
```
}
```

Angular Integration

Show a tool tip when an action occur on the element. Use the Tipsy jQuery plugin

FieldComment parameters
Name	Required	Java Type	Description
fieldComment	false	Object	Allows you to overload the Tipsy jQuery plugin
title	true	String	The content of the tooltip

The Template

COPY

```
<!doctype html>
```
```
<html ng-app="app">
```
```
<head>
```

    <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery-1.8.3.js"></script>

    <script src="http://got5.github.io/KAWWA/grunt-scripts/angular.js"></script>

    <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.core.js"></script>

    <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.widget.js"></script>

    <script src="http://got5.github.io/KAWWA/grunt-scripts/kawwa-directives-full.js"></script>

```
    <script src="script.js"></script>
```
```
</head>
```
```
<body>
```

<p><label for="field1">Enter something:</label>

    <input class="k-field-comment" type="text" id="field1" name="field1" data-field-comment="{'gravity': 'w'}"

           title="A short comment about this field" />

```
</p>
```
```
</body>
```
```
</html>
```

The JavaScript

COPY

var module = angular.module('app',['kawwa2']);

module.controller('myCtrl',function($scope){

```
});
```

Top

KAWWA Markup Pattern Library

Forms

Field Comment

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Java Implementation

Angular Integration

The Template

The JavaScript

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce