CSS工具提示关闭屏幕 [英] css tooltip goes off screen

问题描述

我在此页面上使用纯CSS工具提示: http://theroadmap.co/generation/

I'm using a pure CSS tooltip on this page: http://theroadmap.co/generation/

在小屏幕上，将鼠标悬停在右列的一些较长的工具提示上会导致工具提示离开屏幕.当到达屏幕的右端时，有什么方法可以包裹它?

On small screen, hovering over some longer tooltips on right column causes tooltip to go off screen. Is there any way to get it to wrap when it reaches right end of screen?

以下是工具提示的代码:

Here is code for the tooltip:

/* TOOLTIP TIME */
.tooltip {
    position: relative;
    text-decoration: none;
}

.tooltip:hover:before {
    display: block;
    position: absolute;
    padding: .5em;
    content: attr(href);
    min-width: 120px;
    text-align: center;
    width: auto;
    height: auto;
    white-space: nowrap;
    top: -32px;
    background: rgba(0,0,0,.8);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 1.2em;
    z-index: 1000;
}

.tooltip:hover:after {
    position: absolute;
    display: block;
    content: "";
    border-color: rgba(0,0,0,.8) transparent transparent;
    border-style: solid;
    border-width: 10px;
    height: 0;
    width: 0;
    position: absolute;
    top: -8px;
    left: 1em;
}

推荐答案

    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
   if((mousey+100)>$(window).height())
   {

    $('.tooltip')
    .css({ top: mousey-100 ,left: mousex })

   }
   else if((mousex+200)>$(window).width())
   {
      $('.tooltip')
    .css({ top: mousey ,left: mousex-200})

   }
   else
    {
   $('.tooltip')
    .css({ top: mousey, left: mousex })

    }

这篇关于CSS工具提示关闭屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！