首先看一下圖示：

就像上面兩張圖中的懸浮提示信息，帶有漂亮的箭頭。

接下來我們分步驟的來講解！

一、觸發該浮動Tip的JS函數：showMenu();

static\js\common.js文件872行，就是這個函數的定義。這段函數你看不懂沒關系，會使用就行了，下面我們來講解如何使用。

二、showMenu()的使用方法：

上面降到的這個函數定義的JS文件，它在DZ的核心JS中，所以我們使用的時候不必重新載入文件，因為系統已經早幫你加載過了，所以直接使用就可以，但是前提條件是必須在DZ系統中，比如DZ的任何頁面模版文件中，插件、單頁的模版文件中等等（點擊查看怎么制作Discuz!單頁），超出DZ系統意外，就不能使用了。

首先，得明確，這個效果必須由兩部分組成：

1、顯示層（直接在模版中顯示的內容，鼠標移動上去后觸發該浮動層）；

2、隱藏懸浮層（這個默認是隱藏的，不顯示的，只有鼠標放在顯示層上，才會觸發顯示）。

所以，我們分別建立兩個組成部分。

<p>
     <div id="test" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12'});">鼠標放在我上面看看</div>
</p>
<p>
     <div id="test_menu" style="display:none; border:1px solid #CCC; padding:10px;">這里是Tip提示內容</div>
</p>

效果如下圖：

當鼠標放在文字上時，懸浮層激活，顯示出來。

需要注意的是：

必須給第一個顯示的區域加入ID，用來標識，并且一個頁面中的ID不能有重名；第二個區域也必須加入ID，但是第二個區域的ID不能隨便定義，必須是第一個區域的ID名字_menu；比如：第一個ID叫test，第二個區域的ID就必須是test_menu

還有，第一個區域的onmouseover表示鼠標放上去的行為動作，如果要變成鼠標點擊后才觸發，那就改成onclick;

showMenu({'ctrlid':this.id, 'pos':'12!'}); 里面的參數，第一個就表示當前ID，第二個參數是彈出浮動層的位置，位置分別有1，2，3，4幾個點，互相排列組合，想象有一個正方形，1表示左上角，2表示右上角，3表示右下角，4表示左下角，順時針方向轉動的。

所以，位置這個參數根據自己需要隨意排列組合，比如12，21，13，23等等

上面講的是函數的基礎功能，下面我們開始細化講解，將懸浮美化，帶箭頭。

三、帶箭頭的懸浮Tip

<div id="test" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12'});" style="width:100px; margin:auto;">
<span><a href="javascript:;">{lang drc_qqgroup:main_viewintro}</a></span>
</div>        
 <div id="test_menu" class="tip tip_4" style="display: none;">
              <div class="tip_horn"></div>
              <div class="tip_c">
              <p>這里是Tip提示內容</p>
             </div>
</div>

看上面圖片效果，也許彈出層的位置和箭頭的位置并不是我們理想的位置，可以調節<div id="test_menu" class="tip tip_4" style="display: none;">和 <div class="tip_horn"></div>這兩個層的CSS樣式，左邊加入距離就可以微調，比如：

<div id="test_menu" class="tip tip_4" style="display: none; margin-left:-100px;">

看上面圖片，懸浮彈出的位置是不是向左微移了一點，這里的margin-left:-100px;就是說向左移動100像素

同理，箭頭要向右移動，如下：<div class="tip_horn" style="margin-left:110px;"></div>

如上圖，箭頭已經右移了110個像素。

另外，如果要修改彈出浮動層的寬度，高度，也可以在那個區域加入CSS，定義寬度，高度值。