css tooltip geht aus dem Bild

Ich bin mit einem reinen CSS-tooltip auf diese Seite: http://theroadmap.co/generation/

Auf dem kleinen Bildschirm, schwebt über längere tooltips auf der rechten Spalte bewirkt, dass der tooltip zu gehen aus dem Bildschirm. Gibt es eine Möglichkeit, um es zu wickeln, wenn es reicht am rechten Ende des Bildschirms?

Hier ist der code für 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;
}
CSS media queries zur Verringerung der Breite des tooltip?
danke! problem ist, dass einige tooltips übersteigen sogar 1920 Breite - das Problem hier ist, dass ich nicht weiß wie wrap text in der QuickInfo, auch nicht automatisch...
Eine QuickInfo, die großen sollten wirklich nicht verwendet werden, wie, dass.
Ich Stimme zu, dass es schon problematisch bisher - hätten Sie einen besseren Vorschlag? Diese Seite hat sich gut gemacht: [noexcuselist.com/]

InformationsquelleAutor Sekoul | 2014-01-24

  1. 5
        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 })

    }

    InformationsquelleAutor Amol Patil from vyom labs

  2. -1

    ich hatte das gleiche problem, als ich versuchte, zur Anzeige einer Datei name. scheint, wie der name war zu lang und es waren keine Leerzeichen drin, so habe ich 

    word-break: break-all;

    in meine .tooltip-Klasse.
    dies ist meine funtion für tooltip:

      $('.file_attachments').hover(function () {
                                var tooltip = '<div class="tooltip"></div>';
                                //Hover over code
                                var title = $.trim($(this).attr('title'));

                                if (title.length > 0) {
                                    $(this).data('tipText', title).removeAttr('title');
                                    $('body').append(tooltip);
                                    $('.tooltip').html(title);
                                    $('.tooltip').fadeIn('slow');
                                } else {
                                    $('body').append(tooltip);
                                }

                            }, function () {
                                //Hover out code
                                $(this).attr('title', $(this).data('tipText'));
                                $('.tooltip').remove();
                            }).mousemove(function (e) {
                                var mousex = e.pageX + 20; //Get X coordinates
                                var mousey = e.pageY + 10; //Get Y coordinates
                                $('.tooltip').css({top: mousey, left: mousex})
                            });

    InformationsquelleAutor Laura Chesches

Schreibe einen Kommentar