KAWWA Markup Pattern Library


Forms

Field Comment Component Information

  • Class name: (k-field-comment)
  • Version: 1.1
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration
  • Angular 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.

HTML5 Plain Code

COPY
  1. <p><label for="field1">Enter something:</label>
  2. 	<input class="k-field-comment" type="text" id="field1" name="field1" title="A short comment about this field" /></p>

CSS Code

COPY
  1. .tipsy {
  2. 	position: absolute;
  3. 	font-size: 90%;
  4. 	background-repeat: no-repeat;
  5. 	background-image: url(../img/k-theme0/tipsy.gif);
  6.     padding: 5px;
  7. 	z-index: 100000;
  8. }
  9. .tipsy-north {background-position: top center;}
  10. .tipsy-south {background-position: bottom center;}
  11. .tipsy-east {background-position: right center;}
  12. .tipsy-west {background-position: left center;}
  13. 
                                
  14. .tipsy-inner {
  15. 	background-color: #000;
  16. 	color: #FFF;
  17. 	max-width: 200px;
  18. 	padding: 5px 8px 4px 8px;
  19. 	text-align: center;
  20. }
  21. .tipsy-arrow {
  22. 	position: absolute;
  23. 	width: 0;
  24. 	height: 0;
  25. 	line-height: 0;
  26. 	border: 5px dashed #000;
  27. }
  28. 
                                
  29. /* Rules to colour arrows */
  30. .tipsy-arrow-n {
  31. 	border-bottom-color: #000;
  32. }
  33. .tipsy-arrow-s {
  34. 	border-top-color: #000;
  35. }
  36. .tipsy-arrow-e {
  37. 	border-left-color: #000;
  38. }
  39. .tipsy-arrow-w {
  40. 	border-right-color: #000;
  41. }
  42. .tipsy-n .tipsy-arrow {
  43. 	top: 0px;
  44. 	left: 50%;
  45. 	margin-left: -5px;
  46. 	border-bottom-style: solid;
  47. 	border-top: none;
  48. 	border-left-color: transparent;
  49. 	border-right-color: transparent;
  50. }
  51. .tipsy-nw .tipsy-arrow {
  52. 	top: 0;
  53. 	left: 10px;
  54. 	border-bottom-style: solid;
  55. 	border-top: none;
  56. 	border-left-color: transparent;
  57. 	border-right-color: transparent;
  58. }
  59. .tipsy-ne .tipsy-arrow {
  60. 	top: 0;
  61. 	right: 10px;
  62. 	border-bottom-style: solid;
  63. 	border-top: none;
  64. 	border-left-color: transparent;
  65. 	border-right-color: transparent;
  66. }
  67. .tipsy-s .tipsy-arrow {
  68. 	bottom: 0;
  69. 	left: 50%;
  70. 	margin-left: -5px;
  71. 	border-top-style: solid;
  72. 	border-bottom: none;
  73. 	border-left-color: transparent;
  74. 	border-right-color: transparent;
  75. }
  76. .tipsy-sw .tipsy-arrow {
  77. 	bottom: 0;
  78. 	left: 10px;
  79. 	border-top-style: solid;
  80. 	border-bottom: none;
  81. 	border-left-color: transparent;
  82. 	border-right-color: transparent;
  83. }
  84. .tipsy-se .tipsy-arrow {
  85. 	bottom: 0;
  86. 	right: 10px;
  87. 	border-top-style: solid;
  88. 	border-bottom: none;
  89. 	border-left-color: transparent;
  90. 	border-right-color: transparent;
  91. }
  92. .tipsy-e .tipsy-arrow {
  93. 	right: 0;
  94. 	top: 50%;
  95. 	margin-top: -5px;
  96. 	border-left-style: solid;
  97. 	border-right: none;
  98. 	border-top-color: transparent;
  99. 	border-bottom-color: transparent;
  100. }
  101. .tipsy-w .tipsy-arrow {
  102. 	left: 0;
  103. 	top: 50%;
  104. 	margin-top: -5px;
  105. 	border-right-style: solid;
  106. 	border-left: none;
  107. 	border-top-color: transparent;
  108. 	border-bottom-color: transparent;
  109. }
  110. 
                                
  111. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if ($.fn.tipsy) {
  6. 			$('.k-field-comment').tipsy({
  7. 				gravity: 'w',
  8. 				fade: true,
  9. 				trigger: 'focus'
  10. 			});
  11. 		}
  12. 	});
  13. })(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
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
  2. 	xmlns:p="tapestry:parameter">
  3.  	<t:form t:clientValidation="false" t:id="form">
  4.  		
  5.  		<t:textfield t:id="value" t:mixins="kawwa2/tipsy" 
  6.  			t:options="prop:options"
  7.  			title="title which will be displayed !" />
  8.  		
  9.  	</t:form>
  10. </html>

Java Implementation

COPY
  1. package net.atos.kawwaportal.components.test.pages;
  2. 
                                
  3. import org.apache.tapestry5.annotations.Property;
  4. import org.apache.tapestry5.json.JSONObject;
  5. 
                                
  6. public class Form {
  7. 	
  8. 	@Property
  9. 	private String value;
  10. 	
  11. 	public JSONObject getOptions(){
  12. 		return new JSONObject("gravity", "n");
  13. 		
  14. 	}
  15. }

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
  1. <!doctype html>
  2. <html ng-app="app">
  3. <head>
  4.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery-1.8.3.js"></script>
  5.     <script src="http://got5.github.io/KAWWA/grunt-scripts/angular.js"></script>
  6.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.core.js"></script>
  7.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.widget.js"></script>
  8.     <script src="http://got5.github.io/KAWWA/grunt-scripts/kawwa-directives-full.js"></script>
  9.     <script src="script.js"></script>
  10. </head>
  11. <body>
  12. <p><label for="field1">Enter something:</label>
  13.     <input class="k-field-comment" type="text" id="field1" name="field1" data-field-comment="{'gravity': 'w'}"
  14.            title="A short comment about this field" />
  15. </p>
  16. </body>
  17. </html>

The JavaScript

COPY
  1. var module = angular.module('app',['kawwa2']);
  2. module.controller('myCtrl',function($scope){
  3. 
                                
  4. });

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce