Forms
Field Comment 
- Class name: (k-field-comment)
- Version: 1.1
-
jQuery Interactive feature
-
Tapestry Integration
-
Angular Integration
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.
HTML5 Plain Code
-
<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
-
.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
-
(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.
Name | Required | Java Type | Default Prefix | Default Value | Description |
---|---|---|---|---|---|
options | false | JSONObject | literal | The JSON option for the jQuery widget. |
The Template
-
<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
-
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
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
-
<!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
-
var module = angular.module('app',['kawwa2']);
-
module.controller('myCtrl',function($scope){
-
});