<h4>一、實現效果：</h4>

1.png

2.png

<h4>二、實現特效的四個關鍵點：</h4>

5829692c00016ee012800720.jpg

585733770001165112800720.jpg

核心代碼：<pre><a class="tooltip">中國</a></pre>
鼠標移入時：<pre><a class="tooltip">中國 <div class="tooltip-box">中華人民共和國</div></a></pre>
<h4>三、特效所需要掌握的技術點：</h4>
①createElement：創建元素節點，并返回創建的 Element對象
②appendChild：把元素節點追加到已有的元素上。
③createElement一般與appendChild聯合使用。
④mouseover事件鼠標進入被選元素和子元素都會觸發，mouseenter事件鼠標進入被選元素的子元素不會被觸發
⑤注意mouseover和mouseenter、mouseleave和mouseout區別（此場景使用mouseleave）
⑥setTimeout：在指定的毫秒數后調用函數或計算表達式(注意setTimeout只執行一次)
⑦clearTimeout：可取消由 setTimeout()方法設置的timeout.一般使用是：
<pre>var t=setTimeout(...);
clearTimeout(t);
</pre>
<h4>代碼優化：</h4>

html結構：

CSS樣式：
<pre>
body {
font-size: 14px;
line-height: 1.8;
background: url("bg.jpg") no-repeat center top;
font-family: "Microsoft YaHei", "微軟雅黑";
}

        #demo {
            width: 500px;
            margin: 30px auto;
            padding: 20px 30px;
            position: relative;
            background-color: #fff;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.2);
        }
        
        #demo h2 {
            color: #03F;
        }
        
        #demo .tooltip {
            color: #03F;
            cursor: help;
        }
        
        .tooltip-box {
            display: block;
            background: #fff;
            line-height: 1.6;
            border: 1px solid #66CCFF;
            color: #333;
            padding: 20px;
            font-size: 12px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            overflow: auto;
        }
        
        #mycard img {
            float: left;
            width: 100px;
            height: 100px;
            padding: 10px;
        }
        
        #mycard p {
            float: left;
            width: 150px;
            padding: 0 10px;
        }
    </style>
</pre>

JavaScript：
<pre>
function addEvent(element, event, callbackFunction) {
if(element.addEventListener) {
element.addEventListener(event, callbackFunction, false);
} else if(element.attachEvent) {
element.attachEvent('on' + event, callbackFunction);
}
}
var toolTipBoxClass = "tooltip-box";

        var isIE = navigator.userAgent.indexOf("MSIE") > -1;

        var getEl = function(id) {
            return document.getElementById(id);
        }

        var demo = getEl("demo");

        //obj - ToolTip 超鏈接元素
        //id - ToolTip提示框id
        //html - ToolTip提示框HTML
        //width - ToolTip提示框寬度（可選）
        //height - ToolTip提示框高度（可選）
        function showToolTip(obj, id, html, width, height) {
            if(getEl(id) == null) {
                //創建 <div class="tooltip-box" id="xx">xxxxxx</div>
                var toolTipBox;
                toolTipBox = document.createElement("div");
                toolTipBox.className = toolTipBoxClass;
                toolTipBox.id = id;
                toolTipBox.innerHTML = html;
                obj.appendChild(toolTipBox);

                toolTipBox.style.width = width ? width + "px" : "auto";
                toolTipBox.style.height = height ? height + "px" : "auto";

                if(!width && isIE) {
                    toolTipBox.style.width = toolTipBox.offsetWidth;
                }

                toolTipBox.style.position = "absolute";
                toolTipBox.style.display = "block";

                var left = obj.offsetLeft;
                var top = obj.offsetTop + 20;

                //left，不讓ToolTip提示框超出瀏覽器
                if(left + toolTipBox.offsetWidth > document.body.clientWidth) {
                    var demoLeft = demo.offsetLeft;
                    left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
                    if(left < 0) left = 0;
                }

                toolTipBox.style.left = left + "px";
                toolTipBox.style.top = top + "px";

                addEvent(obj, "mouseleave", function() {
                    setTimeout(function() {
                        getEl(id).style.display = "none";
                    }, 300);
                });
            } else {
                //顯示
                getEl(id).style.display = "block";
            }
        }

</pre>