我试图用工具提示制作图形画布地图。 问题是我试图在视口内显示我的工具提示(一个绝对定位的div)。 我认为这是一件很简单的事情,但我无法弄明白。
[编辑]
#container {
background:black;
height:500px;
width:100%;
}
#tooltip {
background:red;
height:50px;
position:absolute;
width:50px;
left:50%;
margin-left:-25px;
}
#tooltip1 {
background:red;
height:50px;
position:absolute;
width:50px;
left:100%;
margin-left:-25px;
}
#tooltip2 {
background:red;
height:50px;
position:absolute;
width:50px;
left:100%;
top: 25%;
margin-left:-25px;
}
#tooltip3 {
background:red;
height:50px;
position:absolute;
width:50px;
left:25%;
top: 25%;
margin-left:-25px;
}

<div id="container">
<div id="tooltip"></div>
<div id="tooltip1"></div>
<div id="tooltip2"></div>
<div id="tooltip3"></div>
</div>
&#13;
https://jsfiddle.net/scfpfvgw/
你可以看到#tooltip1和#tooltip2正在关闭屏幕,我想要实现的是工具提示保持在视口内。
[/编辑]
[编辑]
// Handle hovering over regions
jQuery( self.getCanvas() ).on( 'click', function( event ) {
// Get right coords values on resize
var canvashw = this.getBoundingClientRect();
var scaleX = this.width / canvashw.width;
var scaleY = this.height / canvashw.height;
var cursor = self.getCursor(event);
var scaledX = Math.round( ( event.clientX - canvashw.left ) * scaleX );
var scaledY = Math.round( ( event.clientY - canvashw.top ) * scaleY );
cursor.x = scaledX;
cursor.y = scaledY;
if (object = self.matchRegion(cursor)) {
// TOOLTIP!
jQuery('#Tooltip').css({
'display': 'block',
'top': cursor.y / scaleY,
'left': cursor.x / scaleX
}).html('<h1>' + object.title + '</h1><hr><br><div id="tooltipwrapper"><img src=' + object.image_link + ' width="200px"><br>Adres:' + object.address + ' <br>' + object.zip_city + '<br>Telefoon:' + object.telephone + '<br><br><a href=' + object.a_link + '>Ga naar ' + object.title + '</a></div><div id="tooltipwrapper">' + '<div class="mobilehide"><b>Openingstijden:</b><br><br>' + object.openinghours + '</div>' + '</div>');
} else {
// Verberg tooltip!
jQuery('#Tooltip').css({'display': 'none'});
}
});
&#13;
答案 0 :(得分:0)
我在这里更新了你的小提琴: https://jsfiddle.net/scfpfvgw/1/
right:0;
如果要将其放置在右侧,则需要使用右:0;而不是左:100%;左边100%会以100%偏移元素,如果你将它对齐到右边,那就不是你想要的了。
我也为你的身体做了一次重置,你的容器应该有相对的位置。
答案 1 :(得分:0)
假设您的工具提示永远不会超过50像素,我制作了一个25像素填充的包装div。
因为您可以看到工具提示永远不会超出框,除非margin-left
属性不是每个div都相同。
.wrapper {
padding: 25px;
background: black;
}
#container {
position: relative;
height: 500px;
width: 100%;
}
#tooltip {
background: red;
height: 50px;
position: absolute;
width: 50px;
left: 50%;
margin-left: -25px;
}
#tooltip1 {
background: red;
height: 50px;
position: absolute;
width: 50px;
left: 100%;
margin-left: -25px;
}
#tooltip2 {
background: red;
height: 50px;
position: absolute;
width: 50px;
left: 100%;
top: 25%;
margin-left: -25px;
}
#tooltip3 {
background: red;
height: 50px;
position: absolute;
width: 50px;
left: 25%;
top: 25%;
margin-left: -25px;
}
<div class="wrapper">
<div id="container">
<div id="tooltip"></div>
<div id="tooltip1"></div>
<div id="tooltip2"></div>
<div id="tooltip3"></div>
</div>
</div>