mucar/jsf2_jquery_tooltip_sample.xhtml

## jsf2_jquery_tooltip_sample.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<!-- jsf:pagecode language="java" location="/src/pagecode/Test.java" --><!-- /jsf:pagecode -->
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:f="http://java.sun.com/jsf/core"
	  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
	<title>Test sayfası</title>
	<meta http-equiv="Content-Type"
	      content="application/xhtml+xml; charset=UTF-8" />

	<!-- Bu iki css'i outputStylesheet ile ekleyince head kısmının en üstüne koyuyor. -->
	<!-- Böyle olunca da tarih alanları dana gibi çıkıyor. Mecburen böyle kullandık. -->
	<link type="text/css" rel="stylesheet"
	      href="#{request.contextPath}/resources/css/jquery/smoothness-1.10/jquery-ui.css" />
	<link type="text/css" rel="stylesheet"
	      href="#{request.contextPath}/resources/css/jquery/jquery-ui-timepicker-addon.css" />

	<h:outputStylesheet library="css" name="stylesheet.css" />

	<h:outputScript library="js" name="jquery/jquery-1.10/jquery-1.9.1.js" />
	<h:outputScript library="js" name="jquery/jquery-1.10/jquery-ui-1.10.2.custom.min.js" />
	<h:outputScript library="js" name="jquery/localization/jquery.ui.datepicker-tr.js" />
	<h:outputScript library="js" name="jquery/jquery-ui-timepicker-addon.js" />
	<h:outputScript library="js" name="jquery/localization/jquery-ui-timepicker-tr.js" />
	<h:outputScript library="js" name="jquery/jquery-ui-sliderAccess.js" />

	<script type="text/javascript">

		$(function() {

			function tooltip(content) {

				if(content.indexOf(":") &gt;= 0 &amp;&amp; content.indexOf(";") &gt;= 0){
				    var satirlar = content.split(';');

			        var htmlTable = "&lt;table border=\"0px\"&gt;&lt;tbody&gt;";

			        for (var i = 0; i &lt; satirlar.length; i++) {
			            var satir = satirlar[i];
			            htmlTable += "&lt;tr&gt;";

			            var kolonlar = satir.split(':');
			            for (var j = 0; j &lt; kolonlar.length; j++) {
			                var kolon = kolonlar[j];

			                if (j==0){ kolon += ":"; }

			                var columnStyle = "";

			                if (j == 0) {
			                    columnStyle = "tooltipBaslik";
			                } else {
			                    columnStyle = "tooltipIcerik";
			                }

			                htmlTable += "&lt;td class=\&quot;" + columnStyle
									  + "\&quot;&gt;" + kolon + "&lt;/td&gt;";
			            }
			            htmlTable += "&lt;/tr&gt;";

			        }

			        htmlTable += "&lt;/tbody&gt;&lt;/table&gt;";
			        //alert(htmlTable);
			        return htmlTable;
				}else{
					return content;
				}
			}

			 $(document).tooltip({

				items: "img, [title]",

				content: function() {

					var element = $(this);

					if(element.is("[title]")){
						var title = element.attr("title");
						return tooltip(title);
					} else if (element.is("img")){
						return element.attr("alt");
					}
				},

				position : { my: "left top", at: "left bottom"},

				//bazı efektler: blind, drop, slide, bounce, clip, explode,
				//fade, fold, highlight, pulsate, scale, shake, size,
				show: { effect: "drop", duration: 100 },
				//hide: { effect: "fade", duration: 1000 },

				//track : true
			});
		});
	</script>
</h:head>
<h:body>
	<div style="text-align: center;">
		<h:form styleClass="form" id="form1">
			<table border="1" style="width: 100%;">
				<tbody>
					<tr>
						<td><h:dataTable id="kullaniciListe"
								value="#{pc_Test.kullaniciListesi}"
								var="kulListe" styleClass="dataTable"
								headerClass="headerClass" footerClass="footerClass"
								rowClasses="rowClass1, rowClass2" columnClasses="columnClass1"
								border="0" cellpadding="2" cellspacing="0" width="100%">
								<h:column id="montTarihi1column">
									<f:facet name="header">
										<h:outputText value="Montaj Tarihi"
													  id="montTarihi1text"></h:outputText>
									</f:facet>
									<h:outputText styleClass="outputText" id="montTarihi1"
										value="#kulListe.montTarihi}"
										title="Montajlayan kullanıcı 1:#{kulListe.montKullanici1};
											   Montajlayan kullanıcı 2:#{kulListe.montKullanici2};
											   Montajlayan kullanıcı 3:#{kulListe.montKullanici3};
											   Montajlayan kullanıcı 4:#{kulListe.montKullanici4}">
										<f:convertDateTime locale="tr" type="both" dateStyle="short"/>
									</h:outputText>
								</h:column>
							</h:dataTable>
						</td>
					</tr>
				</tbody>
			</table>
		</h:form>
	</div>
</h:body>
</html>
	<?xml version="1.0" encoding="UTF-8" ?>
	<!DOCTYPE html>
	<!-- jsf:pagecode language="java" location="/src/pagecode/Test.java" --><!-- /jsf:pagecode -->
	<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">
	<h:head>
	<title>Test sayfası</title>
	<meta http-equiv="Content-Type"
	content="application/xhtml+xml; charset=UTF-8" />

	<!-- Bu iki css'i outputStylesheet ile ekleyince head kısmının en üstüne koyuyor. -->
	<!-- Böyle olunca da tarih alanları dana gibi çıkıyor. Mecburen böyle kullandık. -->
	<link type="text/css" rel="stylesheet"
	href="#{request.contextPath}/resources/css/jquery/smoothness-1.10/jquery-ui.css" />
	<link type="text/css" rel="stylesheet"
	href="#{request.contextPath}/resources/css/jquery/jquery-ui-timepicker-addon.css" />

	<h:outputStylesheet library="css" name="stylesheet.css" />

	<h:outputScript library="js" name="jquery/jquery-1.10/jquery-1.9.1.js" />
	<h:outputScript library="js" name="jquery/jquery-1.10/jquery-ui-1.10.2.custom.min.js" />
	<h:outputScript library="js" name="jquery/localization/jquery.ui.datepicker-tr.js" />
	<h:outputScript library="js" name="jquery/jquery-ui-timepicker-addon.js" />
	<h:outputScript library="js" name="jquery/localization/jquery-ui-timepicker-tr.js" />
	<h:outputScript library="js" name="jquery/jquery-ui-sliderAccess.js" />

	<script type="text/javascript">

	$(function() {

	function tooltip(content) {

	if(content.indexOf(":") >= 0 && content.indexOf(";") >= 0){
	var satirlar = content.split(';');

	var htmlTable = "<table border=\"0px\"><tbody>";

	for (var i = 0; i < satirlar.length; i++) {
	var satir = satirlar[i];
	htmlTable += "<tr>";

	var kolonlar = satir.split(':');
	for (var j = 0; j < kolonlar.length; j++) {
	var kolon = kolonlar[j];

	if (j==0){ kolon += ":"; }

	var columnStyle = "";

	if (j == 0) {
	columnStyle = "tooltipBaslik";
	} else {
	columnStyle = "tooltipIcerik";
	}

	htmlTable += "<td class=\"" + columnStyle
	+ "\">" + kolon + "</td>";
	}
	htmlTable += "</tr>";

	}

	htmlTable += "</tbody></table>";
	//alert(htmlTable);
	return htmlTable;
	}else{
	return content;
	}
	}

	$(document).tooltip({

	items: "img, [title]",

	content: function() {

	var element = $(this);

	if(element.is("[title]")){
	var title = element.attr("title");
	return tooltip(title);
	} else if (element.is("img")){
	return element.attr("alt");
	}
	},

	position : { my: "left top", at: "left bottom"},

	//bazı efektler: blind, drop, slide, bounce, clip, explode,
	//fade, fold, highlight, pulsate, scale, shake, size,
	show: { effect: "drop", duration: 100 },
	//hide: { effect: "fade", duration: 1000 },

	//track : true
	});
	});
	</script>
	</h:head>
	<h:body>
	<div style="text-align: center;">
	<h:form styleClass="form" id="form1">
	<table border="1" style="width: 100%;">
	<tbody>
	<tr>
	<td><h:dataTable id="kullaniciListe"
	value="#{pc_Test.kullaniciListesi}"
	var="kulListe" styleClass="dataTable"
	headerClass="headerClass" footerClass="footerClass"
	rowClasses="rowClass1, rowClass2" columnClasses="columnClass1"
	border="0" cellpadding="2" cellspacing="0" width="100%">
	<h:column id="montTarihi1column">
	<f:facet name="header">
	<h:outputText value="Montaj Tarihi"
	id="montTarihi1text"></h:outputText>
	</f:facet>
	<h:outputText styleClass="outputText" id="montTarihi1"
	value="#kulListe.montTarihi}"
	title="Montajlayan kullanıcı 1:#{kulListe.montKullanici1};
	Montajlayan kullanıcı 2:#{kulListe.montKullanici2};
	Montajlayan kullanıcı 3:#{kulListe.montKullanici3};
	Montajlayan kullanıcı 4:#{kulListe.montKullanici4}">
	<f:convertDateTime locale="tr" type="both" dateStyle="short"/>
	</h:outputText>
	</h:column>
	</h:dataTable>
	</td>
	</tr>
	</tbody>
	</table>
	</h:form>
	</div>
	</h:body>
	</html>