在视口内包含绝对定位的div

时间:2016-03-07 13:54:41

标签: jquery html canvas

我试图用工具提示制作图形画布地图。 问题是我试图在视口内显示我的工具提示(一个绝对定位的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;
&#13;
&#13;



https://jsfiddle.net/scfpfvgw/
你可以看到#tooltip1和#tooltip2正在关闭屏幕,我想要实现的是工具提示保持在视口内。
[/编辑]

[编辑]

&#13;
&#13;
// 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;
&#13;
&#13;

2 个答案:

答案 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>