2 Вопрос: Есть ли способ переместить объект HTML, если объект находится слишком близко к границе окна?

вопрос создан в Wed, May 8, 2019 12:00 AM

Context: Когда я наведу курсор мыши на изображение тега, появится окно, в котором будет отображена информация о работе. Моя проблема в том, что если тег находится слишком близко к левой или правой границе окна, он обрезает прямоугольник, и мы больше не можем видеть информацию.

Актуальный вопрос: Есть ли способ в CSS или JavaScript переместить прямоугольник вправо, если он слишком большой, чтобы поместиться на экране?

 https://imgur.com/a/tO5JnZq

На рисунке показано обрезание прямоугольника, поскольку он расположен слишком близко к левой границе окна

    
1
  1. вы используете какой-то всплывающий подсказок, например плагин, для отображения информации тега
    2019-05-08 16: 03: 48Z
  2. получить позицию курсора при возникновении события наведения мыши, если она меньше ширины элемента div, отображаемого сбоку экрана, затем измените его позицию (+ /-) из позиции курсора
    2019-05-08 16: 06: 49Z
  3. @ MuhammadOmerAslam Нет, я не использую никаких плагинов, но я думаю, что нашел решение, спасибо!
    2019-05-08 17: 03: 54Z
2 ответа                              2                         

Я недавно сделал что-то подобное в jquery, в основном вы получаете ширину экрана и положение экрана курсора при запуске всплывающей подсказки, если она не подходит, затем перемещайте ее до тех пор, пока она не сделает:

$('.showtooltip').on('click touchend', function (e){
    const screenWidth = $(window).width() / 2;
    const x = e.pageX; //Cursor X position
    const y = e.pageY; //Cursor Y position
    const tooltipDirection = e.pageX < screenWidth ? 10 : -200;// if click is on the right of the screen show tooltip to the left of event(-200px)
    const content = "Here's a tooltip";

    if (content.length > 0)
    {
        //insert a span with your content or whatever here
        $('body').append("<div class='custom-tooltip' style='position:absolute;left:" + (x + tooltipDirection) + "px;top:" + y +"px;background-color:#ffa;border:1px solid #cc9;padding:3px;font-size:13px;-moz-box-shadow: 2px 2px 11px #666;-webkit-box-shadow: 2px 2px 11px #666;'>" + content + "</div>");


         setTimeout(function(){//remove the span after 3 seconds
             $('.custom-tooltip').fadeOut(function(){
                 $(this).remove();
             });
         },3000);
    }   
});
    
1
2019-05-08 16: 15: 47Z
  1. Хорошая идея, спасибо!
    2019-05-08 17: 04: 44Z

Используйте встроенный CSS, поле или отступ для пробела в левой части:

style="margin:10px" or "padding:10px"

для полей или отступов справа:

style="position:absolute,right:10px,margin:10px" or "padding:10px"

Надеюсь, это сработает для ваших целей.

    
- 2
2019-05-08 16: 45: 33Z
источник размещен Вот