<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
<title>sample09-5</title>
<h:outputStylesheet name="mystyle.css" library="css" />
<style>
#tip_body { /*ツールチップのデザイン*/
display: none;
position: absolute;
padding: 10px;
left: 5px;
font-size: 0.8em;
background-color: white;
color:black;
width: 500px;
border: 1px solid black;
opacity: 0.9 ;
filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90) ;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 9999; }
.invisible{
display: none;
}
a.clickToolTip{
margin: 0;
padding: 2px 6px;
border-radius: 5px;
-moz-border-radius: 5px;
text-decoration: none;
color: #fff;
background-color: green;
font-size: 12px;
}
p.tooltip1{
margin: 0;
padding: 10px;
width: 250px;
background-color: #000;
opacity: 0.6;
color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
min-height: 30px;
top: 100px;
left: 20px;
position: absolute;
}
.dummy {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
}
</style>
</h:head>
<h:body>
<div id="sample" class="sampleClassName1"></div>
<button onclick="getClassName();">getClassName()</button>
<p>id属性がsampleである要素のclass属性の値:<span id="sampleOutput1"></span></p>
<button onclick="setClassName();">setClassName()</button>
<p>class属性の値を変更後:<span id="sampleOutput2"></span></p>
<table class="clickToolTip">
<tr>
<th><!-- 変更点: aタグのクラスをclickToolTipAnkerに変更 -->
<div class="tooltipWrapper">
タイトル <a href="javascript:void(0);" class="clickToolTipAnker">?</a>
<!-- 変更点: pタグをこの位置に。idは削除 -->
<p class="tooltip1 invisible">"タイトル"の説明</p>
</div>
</th>
<td><input type="text" name="title"></input></td>
</tr>
<tr>
<th>
<div class="tooltipWrapper">
メッセージ<a href="javascript:void(0);" class="clickToolTipAnker">?</a>
<p class="tooltip1 invisible">"メッセージ"の説明<br />複数行の内容を<br />書くことも可能。<br /><br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。</p>
</div>
</th>
<td><textarea name="message" rows="5" cols="30"></textarea></td>
</tr>
</table>
<h:form>
<h:dataTable value="#{bb.meibo}" var="m" columnClasses="c1,c2,c3,c4" headerClass="hd1" rowClasses="row">
<f:facet name="header">会員一覧表</f:facet>
<h:column headerClass="hd2">
<f:facet name="header">番号</f:facet>
<h:commandLink action="#{bb.edit(m)}">#{m.number}</h:commandLink>
</h:column>
<h:column headerClass="hd2">
<f:facet name="header">氏名</f:facet>
<h:outputText class='tooltip' title='#{m.name} #{m.mail} #{m.number}' value="#{m.name}" rendered="#{!m.editable}"/>
<h:inputText value="#{m.name}" rendered="#{m.editable}" size="4" styleClass="inp"/>
</h:column>
<h:column headerClass="hd2" >
<f:facet name="header">メール</f:facet>
<h:outputText class="clickToolTip" value="#{m.mail}" rendered="#{!m.editable}"/>
<h:inputText value="#{m.mail}" rendered="#{m.editable}" size="10" styleClass="inp"/>
<div class="tooltipWrapper">
タイトル <a href="javascript:void(0);" class="clickToolTipAnker" data-no="#{m.number}" data-tooltip="#{m.mail}">?</a>
<p class="tooltip1 invisible">"タイトル"の説明</p>
</div>
</h:column>
<h:column headerClass="hd2">
<f:facet name="header">編集</f:facet>
<h:selectBooleanCheckbox value="#{m.editable}" onclick="submit()"/>
</h:column>
</h:dataTable>
<h:commandButton action="#{bb.next()}" value="変更を保存"/>
</h:form>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var $count = 1;
function getClassName() {
var $elementNodeReference = document.getElementById( "sample" );
var $className = $elementNodeReference.className;
document.getElementById( "sampleOutput1" ).innerHTML = $className;
}
function setClassName() {
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.className = "sampleClassName" + ++$count;
var $className = $elementNodeReference.className;
document.getElementById( "sampleOutput2" ).innerHTML = $className;
}
this.t_tip = function() {
//ツールチップの出る場所
this.xOffset = -10;
this.yOffset = 20;
//マウスホバーイベント
$(".tooltip").unbind().hover(
function(e) {
//要素のtitle属性を取得してspanの中に含める
this.t = this.title;
this.title = '';
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$('body').append( '<span id="tip_body"><table><tr>' + this.t + '_12</tr></table></span>' );
$('#tip_body').css("top", this.top+"px").css("left", this.left+"px").fadeIn("farst");
},
function() {
this.title = this.t;
$("#tip_body").remove();
}
//マウスの動きに合わせる
).mousemove(
function(e) {
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$("#tip_body").css("top", this.top+"px").css("left", this.left+"px");
}
);
};
$(function(){
// ツールチップ表示処理
$('.clickToolTipAnker').click(function(e){
dataTooltip = $(this).attr('data-tooltip');
no = $(this).attr('data-no');
// (html最後に挿入する)ツールチップ用pタグを作成
insertHtml = '<p class="tgToolTip">' + dataTooltip + '</p>';
// pタグをhtmlの最後に挿入
if ($('.' + no).length) {
$('.' +no).remove();
return;
} else {
$('body').append(insertHtml);
}
// クリックされた [?] アイコンの座標を取得
var position = $(this).position();
var newPositionTop = position.top +30; // +数値で下方向へ移動
var newPositionLeft = position.left + 35; // +数値で右方向へ移動
// 出現するツールチップの位置を調整
$(".tgToolTip").css({
'top': newPositionTop + 'px',
'left': newPositionLeft + 'px',
'margin': '0',
'padding': '0.5em 1em',
'background-color': '#FFFF99',
'border': '3px solid #000',
'color': '#000000',
'border-radius': '5px',
'-moz-border-radius': '5px',
'min-height': '1em',
'position': 'absolute',
'z-index': '100'
});
$('p.tgToolTip').attr('id', "id" + no);
var $elementNodeReference = document.getElementById( "id" + no);
$elementNodeReference.className = no;
// (ツールチップの非表示処理) 非表示なクリック領域を展開
// $('body').append('<p class="dummy"></p>');
});
// "ツールチップ以外の領域"をクリックでツールチップを隠す処理
// $('body').on('click', '.dummy', function(){
// $('p.tgToolTip').remove();
// $('p.dummy').remove();
// });
t_tip();
// ツールチップ表示処理 イベント自体はtableにセット。delegateでaタグ
$('.clickToolTip').on('click', 'a.clickToolTipAnker', function(){
var $this = $(this);
//pタグは自分の親の子が持つp.tooltip
var $p = $this.closest('.tooltipWrapper').find('.tooltip1');
// [?]の座標を取得
var position = $this.position();
var newPositionTop = position.top +10; /* + 数値で下方向へ移動 */
var newPositionLeft = position.left + 35; /* + 数値で右方向へ移動 */
// ツールチップの位置を調整
$p
.css({'top': newPositionTop + 'px',
'left': newPositionLeft + 'px'})
.removeClass('invisible');
});
// 表示されたツールチップを隠す処理(ツールチップ領域以外をマウスクリックで隠す)
$('html').on('mousedown', function(event){
// イベント発生源である要素を取得(クリックされた要素を取得)
var clickedElement = event.target;
// 取得要素が"toolTip"クラスを持ってなかったら、ツールチップを非表示に
if(!$(clickedElement).hasClass('tooltip1')){
$('p.tooltip1').addClass('invisible');
}
});
});
</script>
</h:body>
</html>