[JQuery-UI] tooltip 내용 줄 바꿈 하여 표시 진행 예제 입니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" href="/resources/js/jquery-ui/jquery-ui.css" rel="stylesheet"></link>
</head>
<body>
<div style="width:100%;left:50%">
<table id="table" style="position:fixed;border:1px solid blue">
<thead>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
</tr>
</thead>
<tbody>
<tr>
<td>값1</td>
<td></td>
<td>값3</td>
</tr>
</tbody>
</table>
</div>
<div id="test" title="툴팁입니다.................."></div>
<script type="text/javascript" src="/resources/js/jquery/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="/resources/js/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
let idx = 0;
$("#table > tbody > tr").each(function() {
console.log($(this).find("td:eq(1)").text());
$(this).find("td:eq(1)").html("<span id='span" + idx.toString() + "' title='툴팁<br>입니다................'>툴팁이 들어가는 값2</span>")
//$(this).find("td:eq(1)").find("#span" + idx + "").tooltip();
$(this).find("td:eq(1)").find("#span" + idx + "").tooltip({
content:function() { return $(this).prop('title'); }
})
});
});
</script>
</body>
</html>
tbody 의 첫번째 td에 마우스를 올려 놓으면 발생 하게 하였습니다....
'JQuery' 카테고리의 다른 글
| TextArea 입력 줄 수 Count 및 , 한 줄당 입력 byte 체크 테스트 진행 (1) | 2022.06.23 |
|---|---|
| linq.js 를 이용하여 열거형에 데이터가 존재하는지 확인 간단 예제 (0) | 2015.12.17 |
| [JQGrid] 특정 Row editable:true 속성 값에 따라 수정 막아버리기;;; (0) | 2015.12.03 |
| [JQuery] JQGrid 셀 클릭시 달력 표시 간단한 예제 (0) | 2015.11.18 |
| [JQuery] JQGrid 특정컬럼 sortable:true로 정렬시 레코드가 없어지는 현상 임시 해결 (0) | 2015.10.15 |
