JQuery
[JQuery-UI] tooltip 내용 줄 바꿈 하여 표시 진행 예제
Hwoarang757
2024. 6. 2. 22:06
[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에 마우스를 올려 놓으면 발생 하게 하였습니다....
