半透明tooltip的实现

最新推荐文章于 2022-09-29 10:17:21 发布

gaojie1190

最新推荐文章于 2022-09-29 10:17:21 发布

阅读量493

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/gaojie1190/article/details/84210394

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

制作半透明的tooltip 无非就是2个div重叠实现的，下面的例子如下：

<html>
    <head>
        <meta charset="UTF-8" />
        <title>QUnit Test Suite</title>
        <link rel="stylesheet" href="tooltip.css" type="text/css" media="screen">
        <script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.js">
        </script>
        <script type="text/javascript">
            $(function(){
            
                var hideDelay = 500;
                var currentID;
                var hideTimer = null;
                
                var container = $('<div class="chart-panel">' +
                '<div class="chart-spanBG"></div>' +
                '<div class="chart-span">' +
                '<div class="container"></div>' +
                '</div>' +
                '</div>');
                
                $('body').append(container);
                
                $('.popupTrigger').live('mouseover', function(){
                
                    if (hideTimer) 
                        clearTimeout(hideTimer);
                    var pos = $(this).offset();
                    var width = $(this).width();
                    container.css({
                        left: (pos.left + width) + 'px',
                        top: pos.top - 5 + 'px'
                    });
                    $('.container').html("<H5>WWWWWWWWWWWWWWWWWWWW</H5>");
                    container.css('display', 'block');
                });
                
                $('.popupTrigger').live('mouseout', function(){
                    if (hideTimer) 
                        clearTimeout(hideTimer);
                    hideTimer = setTimeout(function(){
                        container.css('display', 'none');
                    }, hideDelay);
                });
                
                // Allow mouse over of details without hiding details
                $('#container').mouseover(function(){
                    if (hideTimer) 
                        clearTimeout(hideTimer);
                });
                
                // Hide after mouseout
                $('#container').mouseout(function(){
                    if (hideTimer) 
                        clearTimeout(hideTimer);
                    hideTimer = setTimeout(function(){
                        container.css('display', 'none');
                    }, hideDelay);
                });
            });
        </script>
    </head>
    <body bgcolor="pink">
        <a class="popupTrigger">House, Devon</a>
    </body>
</html>

css的内容如下：

.chart-panel {
	Z-INDEX: 99999;
	LEFT: 0%;
	MARGIN-LEFT: 0px;
	ZOOM: 1;
	POSITION: absolute;
	TOP: 20%;
	Display: none
}

.chart-spanBG {
	background-color: #FFFFCC;
	POSITION: absolute;
	FILTER: alpha(opacity:50);
	opacity: 0.50;
	width: 100%;
	height: 100%
}

.chart-span {
	width: auto;
	height: auto;
	margin: auto;
	POSITION: relative
}

.chart-panel .container {
	Z-INDEX: 2;
	BORDER-RIGHT: #999 1px solid;
	BORDER-TOP: #999 1px solid;
	MARGIN: 0px;
	OVERFLOW: hidden;
	BORDER-LEFT: #999 1px solid;
	BORDER-BOTTOM: #999 1px solid;
	POSITION: relative
}

.chart-panel H5 {
	FONT-WEIGHT: normal;
	font-size: 10px;
	margin-left: 5px;
	margin-right: 5px;
	white-space: nowrap;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000
}

gaojie1190

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
半透明tooltip的实现

制作半透明的tooltip 无非就是2个div重叠实现的，下面的例子如下：&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;QUnit Test Suite&lt;/title&gt; &lt;link rel="stylesheet&
复制链接

扫一扫

专栏目录