다음과 같은 div 태그가 있습니다.
<div>
<label>Name</label>
<input type="text"/>
</div>:hoverdiv 에 툴팁을 표시하는 방법 , 바람직하게는 페이드 인 / 아웃 효과가있는 방법.
답변:
기본 툴팁의 경우 다음을 원합니다.
<div title="This is my tooltip">더 멋진 자바 스크립트 버전의 경우 다음을 살펴볼 수 있습니다.
https://jqueryhouse.com/best-jquery-tooltip-plugins/
위의 링크는 툴팁에 대한 25 가지 옵션을 제공합니다.
<abbr title="...">...</abbr>대신 사용하십시오. 브라우저는 일반적으로 대시 / 점으로 밑줄이 그어진 스타일을 지정합니다.
그것은 수행 할 수 있습니다 CSS 만에 , 아니 자바 스크립트 전혀 : 실행 데모
사용자 정의 HTML 속성을 적용하십시오 (예 : data-tooltip="bla bla"당신의 객체 (div 또는 무엇이든) :
<div data-tooltip="bla bla">
something here
</div>:before각 [data-tooltip]객체 의 의사 요소를 투명하고 절대적으로 배치하며 data-tooltip=""내용 으로 가치를 갖도록 정의하십시오 .
[data-tooltip]:before {
position : absolute;
content : attr(data-tooltip);
opacity : 0;
}:hover:before각각의 호버링 상태를 정의 [data-tooltip]하여 표시하십시오.
[data-tooltip]:hover:before {
opacity : 1;
}툴팁 객체에 스타일 (색상, 크기, 위치 등)을 적용하십시오. 이야기의 끝.
데모에서는 다른 규칙을 정의하여 부모 외부에 있지만 다른 사용자 정의 속성, data-tooltip-persistent간단한 규칙 을 사용하여 도구 팁을 가리킬 때 사라져야하는지 여부를 지정했습니다 .
[data-tooltip]:not([data-tooltip-persistent]):before {
pointer-events: none;
}참고 1 : 이에 대한 브라우저 적용 범위는 매우 넓지 만 이전 IE에는 자바 스크립트 폴백 (필요한 경우)을 사용하는 것이 좋습니다.
참고 2 : 향상된 기능으로 약간의 자바 스크립트를 추가하여 마우스 위치를 계산하고 여기에 적용된 클래스를 변경하여 의사 요소에 추가 할 수 있습니다.
<br>하고 다른 사람들은 \n또는 \r나머지 문자열에서 일반 텍스트로 나타납니다. 업데이트 : 방금 최대 너비를 설정하면 내용을 자동으로 조정하고 줄 바꿈을하는 것으로 나타났습니다. 정말 깔끔합니다! (누군가가 답을 알고있는 경우에는, 나는 아직도 그 고맙겠)
이를 위해 JavaScript가 전혀 필요하지 않습니다. title속성을 설정하십시오 .
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>툴팁의 시각적 표현은 브라우저 / OS에 따라 다르므로 페이드 인 될 수도 있고 페이딩되지 않을 수도 있습니다. 그러나 이것은 툴팁을 수행하는 의미 론적 방법이며 화면 판독기와 같은 접근성 소프트웨어에서 올바르게 작동합니다.
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>title속성이 잘리지 않습니다.
title작동합니다. 더 복잡한 것이 필요한 경우 더 복잡한 다른 답변이 있습니다. 나는 당신이 여기서 어떤 점을 만들려고하는지 확실하지 않습니다.
다음은 멋진 jQuery 툴팁입니다.
이를 구현하려면 다음 단계를 따르십시오.
<head></head>태그 에이 코드를 추가하십시오 .
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$("[title]").tooltip();
</script>
<style type="text/css">
/* tooltip styling. by default the element to be styled is .tooltip */
.tooltip {
display:none;
background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
</style> 툴팁을 만들려는 HTML 요소에 title속성을 추가 하십시오. title 속성에있는 텍스트는 툴팁에 있습니다.
참고 : JavaScript가 비활성화되면 기본 브라우저 / 운영 체제 툴팁으로 대체됩니다.
나는 div에도 적응할 수 있어야하는 것을했습니다.
HTML
<td>
<%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
<span class="showonhover">
<a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
<span class="hovertext">
<%# Eval("Name") %>
</span>
</span>
</td>CSS
.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}더 자세한 토론은 내 게시물을 참조하십시오.
다음은 순수 CSS 3 구현입니다 (선택적 JS 포함).
"data-tooltip"이라는 div에 속성을 설정하기 만하면 텍스트 위에 마우스를 놓으면 해당 텍스트가 옆에 표시됩니다.
툴팁이 커서 근처에 표시되도록하는 선택적 JavaScript가 포함되어 있습니다. 이 기능이 필요하지 않으면이 바이올린의 JavaScript 부분을 무시해도됩니다.
호버 상태에서 페이드 인을 원하지 않으면 전환 속성을 제거하십시오 .
title속성 툴팁 과 같은 스타일 입니다. JSFiddle은 다음과 같습니다. http://jsfiddle.net/toe0hcyn/1/
HTML 예 :
<div data-tooltip="your tooltip message"></div>CSS :
*[data-tooltip] {
position: relative;
}
*[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: -20px;
right: -20px;
width: 150px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
display: block;
font-size: 12px;
line-height: 16px;
background: #fefdcd;
padding: 2px 2px;
border: 1px solid #c0c0c0;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}
*[data-tooltip]:hover::after {
opacity: 1;
}마우스 위치 기반 툴팁 위치 변경을위한 선택적 JavaScript :
var style = document.createElement('style');
document.head.appendChild(style);
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
var attr = allElements[i].getAttribute('data-tooltip');
if (attr) {
allElements[i].addEventListener('mouseover', hoverEvent);
}
}
function hoverEvent(event) {
event.preventDefault();
x = event.x - this.offsetLeft;
y = event.y - this.offsetTop;
// Make it hang below the cursor a bit.
y += 10;
style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px }'
}다음은 모든 바운티 요구 사항입니다.
다음은 데모 및 내 코드에 대한 링크입니다 (JSFiddle)
이 순수 JS, CSS 및 HTML5 바이올린에 통합 한 기능은 다음과 같습니다.
HTML :
<div id="wrapper">
<div id="a">Hover over this div to see a cool tool tip!</div>
</div>CSS :
#a{
background-color:yellow;
padding:10px;
border:2px solid red;
}
.tooltip{
background:black;
color:white;
padding:5px;
box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
border-radius:10px;
opacity:0;
}자바 스크립트 :
var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
// seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";
var showTip = function(){
var tip = document.createElement("span");
tip.className = "tooltip";
tip.id = "tip";
tip.innerHTML = tipMessage;
div.appendChild(tip);
tip.style.opacity="0"; // to start with...
var intId = setInterval(function(){
newOpacity = parseFloat(tip.style.opacity)+0.1;
tip.style.opacity = newOpacity.toString();
if(tip.style.opacity == "1"){
clearInterval(intId);
}
}, fadeSpeed);
};
var hideTip = function(){
var tip = document.getElementById("tip");
var intId = setInterval(function(){
newOpacity = parseFloat(tip.style.opacity)-0.1;
tip.style.opacity = newOpacity.toString();
if(tip.style.opacity == "0"){
clearInterval(intId);
tip.remove();
}
}, fadeSpeed);
tip.remove();
};
a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);데이터 속성, 의사 요소 등을 사용하여 사용자 정의 CSS 툴팁을 만들 수 있습니다 content: attr().
http://jsfiddle.net/clintioo/gLeydk0k/11/
<div data-tooltip="This is my tooltip">
<label>Name</label>
<input type="text" />
</div>.
div:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 180px;
background: orange;
color: white;
border-radius: 3px;
}
div:hover:after {
content: '';
position: absolute;
margin: 6px 0 0 3px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid orange;
border-bottom: 5px solid transparent;
}
input[type="text"] {
width: 125px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}가장 간단한 방법은 position: relative포함 요소 및 position: absolute컨테이너 내부의 툴팁 요소를 설정하여 상위 요소 (포함 요소)를 기준으로 플로팅되도록하는 것입니다. 예를 들면 다음과 같습니다.
<div style="background: yellow;">
<div style="display: inline-block; position: relative; background: pink;">
<label>Name</label>
<input type="text" />
<div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
Tooltip text
</div>
</div>
</div>제목을 사용할 수 있습니다. 그것은 거의 모든 것에 대해 작동합니다
<div title="Great for making new friends through cooperation.">
<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">
<table title="Great job working for those who understand the way i feel">
html 창에서 볼 수있는 태그를 생각하고 태그 title="whatever tooltip you'd like"안에 삽입 하면 툴팁이 생깁니다.
다음 onmouseover과 onmouseout같은 동안 자식 div를 토글 할 수 있습니다 .
function Tooltip(el, text) {
el.onmouseover = function() {
el.innerHTML += '<div class="tooltip">' + text + '</div>'
}
el.onmouseout = function() {
el.removeChild(el.querySelector(".tooltip"))
}
}
//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI tooltip</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$("#tooltip").tooltip();
});
</script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>툴팁 스타일을 사용자 정의 할 수도 있습니다. 이 링크를 참조하십시오 : http://jqueryui.com/tooltip/#custom-style
CSS3 전용 솔루션은 다음과 같습니다.
CSS3 :
div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0; z-index: 1000;}HTML5 :
<div style="background: yellow;">
<div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
<label>Name</label>
<input type="text" />
</div>
</div>그런 다음 tooltip-2같은 방식으로 div 를 만들 수 있습니다 ... 물론 title속성 대신 속성을 사용할 수도 있습니다 data.
[id^=tooltip]방금 클래스를 사용할 수있을 때 선택기 를 사용 .tooltip합니까?
div[data-title])추가 마크 업을 추가하지 않고도)
이 시도. CSS로만 할 수 있으며 data-title툴팁에 대한 속성 만 추가했습니다 .
.tooltip{
position:relative;
display: inline-block;
}
.tooltip[data-title]:hover:after {
content: attr(data-title);
padding: 4px 8px;
color: #fff;
position: absolute;
left: 0;
top: 110%;
white-space: nowrap;
border-radius: 5px;
background:#000;
}<div data-title="My tooltip" class="tooltip">
<label>Name</label>
<input type="text"/>
</div>
세 가지 유형의 페이드 효과를 개발했습니다.
/* setup tooltips */
.tooltip {
position: relative;
}
.tooltip:before,
.tooltip:after {
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
}
.tooltip:after {
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(0,0,0,.75);
border-left: 6px solid transparent;
content: '';
height: 0;
top: 20px;
left: 20px;
width: 0;
}
.tooltip:before {
background: rgba(0,0,0,.75);
border-radius: 2px;
color: #fff;
content: attr(data-title);
font-size: 14px;
padding: 6px 10px;
top: 26px;
white-space: nowrap;
}
/* the animations */
/* fade */
.tooltip.fade:after,
.tooltip.fade:before {
transform: translate3d(0,-10px,0);
transition: all .15s ease-in-out;
}
.tooltip.fade:hover:after,
.tooltip.fade:hover:before {
opacity: 1;
transform: translate3d(0,0,0);
}
/* expand */
.tooltip.expand:before {
transform: scale3d(.2,.2,1);
transition: all .2s ease-in-out;
}
.tooltip.expand:after {
transform: translate3d(0,6px,0);
transition: all .1s ease-in-out;
}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after {
opacity: 1;
transform: scale3d(1,1,1);
}
.tooltip.expand:hover:after {
transition: all .2s .1s ease-in-out;
}
/* swing */
.tooltip.swing:before,
.tooltip.swing:after {
transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
transform-origin: 0 0;
transition: transform .15s ease-in-out, opacity .2s;
}
.tooltip.swing:after {
transform: translate3d(0,60px,0);
transition: transform .15s ease-in-out, opacity .2s;
}
.tooltip.swing:hover:before,
.tooltip.swing:hover:after {
opacity: 1;
transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
}
/* basic styling: has nothing to do with tooltips: */
h1 {
padding-left: 50px;
}
ul {
margin-bottom: 40px;
}
li {
cursor: pointer;
display: inline-block;
padding: 0 10px;
} <h1>FADE</h1>
<div class="tooltip fade" data-title="Hypertext Markup Language">
<label>Name</label>
<input type="text"/>
</div>
<h1>EXPAND</h1>
<div class="tooltip expand" data-title="Hypertext Markup Language">
<label>Name</label>
<input type="text"/>
</div>
<h1>SWING</h1>
<div class="tooltip swing" data-title="Hypertext Markup Language">
<label>Name</label>
<input type="text"/>
</div>
다음은 마우스의 위치와 창의 높이와 너비를 고려한 간단한 툴팁 구현입니다.
function showTooltip(e) {
var tooltip = e.target.classList.contains("tooltip")
? e.target
: e.target.querySelector(":scope .tooltip");
tooltip.style.left =
(e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
? (e.pageX + 10 + "px")
: (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
tooltip.style.top =
(e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
? (e.pageY + 10 + "px")
: (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}
var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
tooltips[i].addEventListener('mousemove', showTooltip);
}.couponcode {
color: red;
cursor: pointer;
}
.couponcode:hover .tooltip {
display: block;
}
.tooltip {
position: absolute;
white-space: nowrap;
display: none;
background: #ffffcc;
border: 1px solid black;
padding: 5px;
z-index: 1000;
color: black;
}Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.( 이 바이올린 참조 )
API를 사용하지 않고 순수한 CSS와 Jquery 데모를 사용하여 이와 같은 작업을 수행 할 수 있습니다
HTML
<div class="pointer_tooltip">
Click & Drag to draw the area
</div>CSS
.pointer_tooltip{
width : auto;
height : auto;
padding : 10px;
border-radius : 5px;
background-color : #fff;
position: absolute;
}jquery
$(document).mousemove(function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
//set the actuall width
$('.pointer_tooltip').width($('.pointer_tooltip').width());
var position_top = event.pageY+18;
var position_left = event.pageX-60;
var width=$('body').width()-$('.pointer_tooltip').width();
//check if left not minus
if(position_left<0){
position_left=10;
}else if(position_left > width){
position_left=width-10;
}
$('.pointer_tooltip').css('top',position_top+'px');
$('.pointer_tooltip').css('left',position_left+'px');
});순수 CSS를 사용하여 툴팁을 만들 수 있습니다.이 도구를 사용해보십시오.
HTML
<div class="tooltip"> Name
<span class="tooltiptext">Add your tooltip text here.</span>
</div>CSS
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 270px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
} div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
text-align: center;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
//text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.toolLeft {
top: -5px;
right: 105%;
}
.toolRight {
top: -5px;
left: 105%;
}
.toolTop {
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.toolBottom {
top: 100%;
left: 50%;
margin-left: -60px;
} <div>
<div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />
<div class="tooltip">Left <span class="tooltiptext toolLeft">Tooltip text</span></div><br />
<div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />
<div class="tooltip">Bottom <span class="tooltiptext toolBottom">Tooltip text</span></div><br />
</div>간단한 CSS로 jsfiddle할 수 있습니다 ... 여기에서 예제를 볼 수 있습니다
툴팁에 대한 CSS 코드 아래
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}이 질문에 대한 많은 답변이 있지만 여전히 누군가에게 도움이 될 수 있습니다. 모든 왼쪽, 오른쪽, 위쪽, 아래쪽 위치입니다.
CSS는 다음과 같습니다.
.m-tb-5 {
margin-top: 2px;
margin-bottom: 2px;
}
[data-tooltip] {
display: inline-block;
position: relative;
cursor: help;
padding: 3px;
}
/* Tooltip styling */
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: absolute;
background: #000;
color: #fff;
padding: 3px 6px;
font-size: 10px;
line-height: 1.4;
min-width: 100px;
text-align: center;
border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
bottom: 100%;
margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
left: 100%;
margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
top: 100%;
margin-top: 6px;
}
[data-tooltip-position="left"]:before {
right: 100%;
margin-right: 6px;
}
/* Tooltip arrow styling/placement */
[data-tooltip]:after {
content: '';
display: none;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
left: 50%;
margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
top: 50%;
margin-top: -6px;
}
[data-tooltip-position="top"]:after {
bottom: 100%;
border-width: 6px 6px 0;
border-top-color: #000;
}
[data-tooltip-position="right"]:after {
left: 100%;
border-width: 6px 6px 6px 0;
border-right-color: #000;
}
[data-tooltip-position="left"]:after {
right: 100%;
border-width: 6px 0 6px 6px;
border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
display: block;
z-index: 50;
}HTML 태그는 다음과 같습니다.
<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title="">Text Here</p>
<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title="">Text Here</p>
<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title="">Text Here</p>
<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title="">Text Here</p>
이것을 툴팁으로 사용할 수도 있습니다 ... 동일하게 작동하지만 추가 태그를 작성해야합니다 ..
<abbr title="THis is tooltip"></abbr>그리고 내 버전
.tooltip{
display: inline;
position: relative; /** very important set to relative*/
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title); /**extract the content from the title */
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}그런 다음 HTML
<div title="This is some information for our tooltip." class="tooltip">bar </div>Azle 은 훌륭하게 구현되었습니다. 내 대상 요소 가 클래스 이름이 "my_icon"인 아이콘이라고 가정하십시오. Azle의 add_tooltip 함수를사용하여 요소를 간단히 타겟팅하십시오.
az.add_tooltip('my_icon', 1, {
"this_class" : "my_tooltip",
"text" : "HELLO THERE!"
})
일반적인 CSS 스타일을 사용하여 툴팁 의 위치와 스타일 을 제어 할 수 있습니다 . 위의 툴팁은 다음과 같이 스타일이 지정됩니다.
az.style_tooltip('my_tooltip', 1, {
"background" : "black",
"margin-left" : "10px",
"color" : "hotpink",
"font-weight" : "bold",
"font-family" : "Arial",
"padding" : "10px",
"border-radius" : "10px"
})"image_path"를 지정하여 툴팁에 이미지 를 추가 할 수도 있습니다 .
az.add_tooltip('my_icon', 1, {
"this_class" : "my_tooltip",
"text" : "HELLO THERE!",
"image_path" : "https://cdn-images-1.medium.com/max/1874/1*toepgVwopga9TYFpSkSxXw.png",
"image_class" : "my_image"
})
위에서 "image_class"를 지정 했으므로 이번에 는 이미지 를 대상으로 동일한 style_tooltip 함수를 사용하여 이미지의 스타일 을 지정할 수 있습니다 . 위의 게임 이미지는 다음과 같이 스타일이 지정되었습니다.
az.style_tooltip('my_image', 1, {
"width" : "50px",
"align" : "center"
})다음은 더 큰 이미지 를 사용하는 예입니다 .
... 다음과 같이 추가되고 스타일이 지정됩니다.
az.add_tooltip('my_icon', 1, {
"this_class" : "my_tooltip",
"text" : "MORE INFO<br><br>",
"image_path" : "https://i0.wp.com/proactive.ie/wp-content/uploads/2017/11/Infographic.jpg?resize=1240%2C1062&ssl=1",
"image_class" : "my_image"
})
az.style_tooltip('my_image', 1, {
"width" : "500px"
})다음은 전체 코드 의 GIST 입니다.
이 FIDDLE 에서 놀 수 있습니다 .
div에 툴팁 추가
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Information</span>
</div>