Позиционирование карты наведения CSS

Я пытаюсь создать карту с css. У меня есть один вопрос о положении страницы вниз.

Я создал эту страницу DEMO из codepen.io. Итак, если вы находитесь в нижней части демонстрационной страницы, вы видите пузырь div.

Что мне делать, чтобы показать .bubble внизу треугольника вниз по странице?

.container{
  width:400px;
  height:400px;
  margin:0px auto;
  margin-top:50px;
}
.bubble 
{
position: absolute;
width: 250px;
height: 120px;
padding: 0px;
background: #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
  display:none;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 194px;
}
.hub:hover .bubble{
  display:block;
}
.wrp{
  width:300px;
  height:68px;
}

Ответ 1

ИЗМЕНИТЬ

Я создал плагин jQuery, который решает эти проблемы, перетаскивает всплывающую подсказку, чтобы оставаться внутри окна, простой и отзывчивый. Вы можете увидеть это в действии здесь tipso

Я разблокировал ваш код и переработал его в кодефене

Я думаю, это то, что вы ищете:)

$('.hub').on({
  mouseenter: function() {
    $(this).addClass('zIndex');

    var top, left,
      toolTipWidth = 250,
      toolTipHeight = 120,
      arrowHeight = 15,
      elementHeight = $(this).height(),
      elementWidth = $(this).width(),
      documentHeight = $(window).height(),
      bounding = $(this)[0].getBoundingClientRect(),
      topHub = bounding.top;


    if (topHub < topHub + toolTipHeight && topHub + toolTipHeight + arrowHeight + elementHeight <= documentHeight) {

      $('.bubble').addClass('top');
      top = elementHeight + arrowHeight;
      left = -(elementWidth / 2);

    }

    if (topHub + toolTipHeight + arrowHeight + elementHeight >= documentHeight) {
      $('.bubble').addClass('bottom');
      top = -toolTipHeight - arrowHeight;
      left = -(elementWidth / 2);
    }


    $('.bubble').css({
      'top': top,
      'left': left
    });
  },
  mouseleave: function() {
    $('.bubble').removeClass('top bottom');
    $(this).removeClass('zIndex');
  }
});

Ответ 2

Я нашел решение следующим образом.

Работа DEMO, но я не смог сделать это с помощью window. Если кто-то может это сделать с окном, пожалуйста, ответьте мне...

    $(document).ready(function () {
        $('.hub').mouseover(function () {
            var elementHeight = $(this).height();
            var offsetWidth = -250;
            var offsetHeight = 25;
            var toolTipWidth = $(".bubble").width();
            var toolTipHeight = $(".bubble").height();
            var documentWidth = $(document).width();
            var documentHeight = $(document).height();
            var top = $(this).offset().top;

            if (top + toolTipHeight > documentHeight) {                   
                top = documentHeight - toolTipHeight - offsetHeight - (2 * elementHeight);
            }
            var left = $(this).offset().left + offsetWidth;
            if (left + toolTipWidth > documentWidth) {                      
                left = documentWidth - toolTipWidth - (2 * offsetWidth);
            }                    
            $('.bubble').css({ 'top': top, 'left': left });
        });
    });