Ajax tooltip 动态ajax载入tips

最新推荐文章于 2021-08-06 17:56:51 发布

最新推荐文章于 2021-08-06 17:56:51 发布 · 419 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用Ajax实现的Tooltip效果，通过鼠标悬停在特定链接上触发动态加载提示信息，展示了具体的HTML代码实例。

Ajax tooltip 动态ajax载入tips

演示

 
   XML/HTML Code 
  
 
   <div id="mainContainer">  
    <div id="mainContent">  
        <table width="100%" class="productTable">  
            <thead>  
                <th>Product</th>  
                <th>Info</th>  
            </thead>  
            <tbody>  
                <tr class="oddRow">  
                    <td>JS Calendar</td>  
                    <td><a href="#" onmouseover="ajax_showTooltip(window.event,'demo-pages/js-calendar.html',this);return false" onmouseout="ajax_hideTooltip()">Info</a></td>    
                </tr>  
                <tr class="evenRow">  
                    <td>Dragable boxes</td>  
                    <td><a href="#" onmouseover="ajax_showTooltip(window.event,'demo-pages/dragable-boxes.html',this);return false" onmouseout="ajax_hideTooltip()">Info</a></td>                 
                </tr>  
                <tr class="oddRow">  
                    <td>Ajax tooltip</td>  
                    <td><a href="#" onmouseover="ajax_showTooltip(window.event,'demo-pages/ajax-tooltip.html',this);return false" onmouseout="ajax_hideTooltip()">Info</a></td>               
                </tr>  
            </tbody>  
        </table>  
        <div style="clear:both">      
        </div>  
        <div id="debug"></div>  
          
    </div>  
</div>  
 
  