툴팁 보여주기

1. 툴팁 만들기

/**
 * 아래의 css 클래스가 정의되어야 한다.
 * .tooltipShadow
 *     background: url(shadow.png);  /* 반투명한 그림자 */
 * }
 * .tooltipContent {
 *     left: -4px; top: -4px;
 *     background-color: #ff0;
 *     border: solid black 1px;
 *     padding: 5px;
 *     font: bold 10pt sans-serif;
 *
 */
function Tooltip() {
    this.tooltip = document.createElement("div");
    this.tooltip.style.position = "absolute";
    this.tooltip.style.visibility = "hidden";
    this.tooltip.className = "tooltipShadow";
   
    this.content = document.createElement("div");
    this.content.style.position = "relative";
    this.content.className = "tooltipContent";
   
    this.tooltip.appendChild(this.content);
}
Tootip.prototype.show = function(text, x, y) {
    this.content.innerHTML = text;
    this.tooltip.style.left = x + "px";
    this.tooltip.style.top = y + "px";
    this.tooltip.style.visibility = "visible";
    if (this.tooltip.parentNode != document.body)
        document.body.appendChild(this.tooltip);
};
Tooltip.prototype.hide = function() {
    this.tooltip.style.visibility = "hidden";
};