[javascript] div에 툴팁 추가

다음은 모든 바운티 요구 사항입니다.

• jQuery 없음
• 즉시 등장
• 마우스가 해당 영역을 벗어날 때까지 사라지지 않음
• 페이드 인 / 아웃 효과 통합
• 그리고 마지막으로 .. 간단한 해결책

다음은 데모 및 내 코드에 대한 링크입니다 (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);

---