간단♪jQuery UI로 tooltip로 구현!
소개
직장에서, 툴팁의 구현이 있었으므로, 그 사용을 기입합니다.
툴팁은 마우스 오버했을 때에 표시되는 프레임내의 보충 설명의 녀석입니다.
소재
1.시사
jQuery 및 jQuery UI를 로드합니다.
다운로드판에서도 CDN에서도 가능. (jQuery UI의 CSS도로드하는 것을 잊지 마세요!)
※각 공식을 참조
htps : // j 쿠에 ry. 코m/
sample.html
<html lang="ja">
<head>
<title>サンプル</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body>
<p class="test">テスト</p>
</body>
</html>
※다운로드해 참조해도 같습니다
2. 툴팁 처리 추가
한 문장 추가합니다. (셀렉터는 기호로)$(".test").tooltip();
sample.html <p class="test">テスト</p>
<script>
$(".test").tooltip();
</script>
...아직 움직이지 않지?
3. 툴팁으로 표시하는 내용을 기입
툴팁으로 표시하는 텍스트를 title에 넣어 완성!
sample.html <p class="test" title="ここに出したいテキストを入力">テスト</p>
4.완성!
개발자 도구를 사용하여 구조를 확인하고 CSS를 덮어쓰거나 옵션을 설정하여 추가 정렬을 할 수 있습니다.
이상
Reference
이 문제에 관하여(간단♪jQuery UI로 tooltip로 구현!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sakurai1111/items/9e799bd22f576baafb46
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<p class="test">テスト</p>
<script>
$(".test").tooltip();
</script>
툴팁으로 표시하는 텍스트를 title에 넣어 완성!
sample.html
<p class="test" title="ここに出したいテキストを入力">テスト</p>
4.완성!
개발자 도구를 사용하여 구조를 확인하고 CSS를 덮어쓰거나 옵션을 설정하여 추가 정렬을 할 수 있습니다.
이상
Reference
이 문제에 관하여(간단♪jQuery UI로 tooltip로 구현!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sakurai1111/items/9e799bd22f576baafb46
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(간단♪jQuery UI로 tooltip로 구현!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Sakurai1111/items/9e799bd22f576baafb46텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
