Dynamisch positionieren css-tooltip

Ich eine tooltip-Lösung entwickelt, die in HTML + CSS:

HTML-Teil:

<a href="#" class="tooltip">
Tooltip
<span>
    <strong>Light-weight CSS Tooltip</strong><br />
    This is the easy-to-use Tooltip driven purely by CSS.<br/>
    And this is some additional text 
    <br/><br/><br/>
    More additional text
</span>

CSS:

a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
       z-index:10;
       display:none;
       padding:14px 20px;
       margin-top:-50px;
       margin-left:28px;
       width:70%;
       line-height:16px;}

a.tooltip:hover span {
       display:inline;
       position:absolute;
       color:#111;
       border:1px solid #DCA;
       background:#fffAF0;}

a.tooltip span {
       border-radius:4px;
       box-shadow: 5px 5px 8px #CCC;}

Dies funktioniert sehr gut mit einer Ausnahmen: Wenn die überspannung die Anzeige der tooltip ist zu weit unten am unteren Rand des Fensters kann der Benutzer nicht sehen, die ganze tooltip.

Gibt es eine Möglichkeit, irgendwie dynamisch die position tooltip, damit Ihre Inhalte die ganze Zeit, wenn er mit der Maus auf die Spanne?

(Ich bin ein absoluter Neuling in html, so beantworten Sie bitte dieses im Verstand halten)

UPDATE: wäre es möglich, die Anzeige der QuickInfo immer auf die Mitte des Bildschirms? Wäre das nicht eine Lösung für das ursprüngliche problem, wäre aber eine Lösung für mich.

javascript/jquery-ok ?
Wenn ich noch ein Skript, dann ist es, dann werde ich versuchen, zu integrieren, zu meiner Seite (ohne vollständig zu verstehen, aber das ist ok für mich).

InformationsquelleAutor Istvanb | 2015-06-17

Tooltip mit JavaScript/JQuery

ARBEITEN DEMO

HTML

<span id="tooltip1" class="tooltip">
    <strong>Light-weight CSS Tooltip</strong><br />
    This is the easy-to-use Tooltip driven purely by CSS.<br/>
    And this is some additional text 
    <p> More additional text </p>
</span>


<a href="#" class="tooltip1" style="border: 1px solid red;">
Tooltip
</a>

CSS

body {
    overflow:scroll margin:0px;
}
span {
    z-index:10;
    padding:14px 20px;
    width:auto;
    line-height:16px;
    display:inline;
    position:absolute;
    top:50px;
    color:#111;
    border:1px solid #dca;
    background:#fffAF0;
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
    opacity:0.5;
    overflow:auto;
}
a {
    text-decoration:none;
    position:absolute;
    bottom:500px;
    /* Change as per your wish it will still work*/
    left:800px;
    /* Change as per your wish it will still work*/
}

JavaScript/JQuery

$(".tooltip").hide(); //On very first line of scripts.js file


$("a").hover(function () {
    var elems = this;
    var curClass = elems.className //current class clicked.
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    var left = elems.offsetLeft;
    var top = elems.offsetTop;
    var linkHeight = $("." + curClass).height();
    var linkWidth = $("." + curClass).width();
    var bottom = windowHeight - top - linkHeight;
    var right = windowWidth - left - linkWidth;
    var topbottom = (top < bottom) ? bottom : top;
    var leftright = (left < right) ? right : left;

    var tooltiph = $("#" + curClass).height();
    var tooltipw = $("#" + curClass).width();

    if (topbottom == bottom && leftright == right) //done
    {
        var yPos = top;
        var xPos = left + linkWidth + 10;
        $("#" + curClass).css("top", yPos + "px");
        $("#" + curClass).css("left", xPos + "px");
    } else if (topbottom == bottom && leftright == left) //done
    {
        var yPos = top;
        var xPos = right + linkWidth + 10;
        $("#" + curClass).css("top", yPos + "px");
        $("#" + curClass).css("right", xPos + "px");
    } else if (topbottom == top && leftright == right) //done
    {
        var xPos = left + linkWidth + 10;
        var yPos = top - tooltiph - (linkHeight / 2);
        $("#" + curClass).css("top", yPos + "px");
        $("#" + curClass).css("left", xPos + "px");
    } else if (topbottom == top && leftright == left) {
        var yPos = top - tooltiph - (linkHeight / 2);
        var xPos = left - tooltipw - linkWidth;
        $("#" + curClass).css("top", yPos + "px");
        $("#" + curClass).css("left", xPos + "px");
    } else {}

    $(".tooltip").fadeIn('fast');
},

function () {
    $(".tooltip").fadeOut('fast');
});

InformationsquelleAutor divy3993

0

Fürchte ich, dass CSS erlaubt Ihnen nicht, zu erkennen, tooltip position, und weil das so ist, kann man nicht machen dynamische Linienführungen mit reinem CSS. Was Sie allerdings tun können, ist, wenn Sie wissen, dass das element in der Nähe der Unterseite, fügen Sie eine weitere Klasse, um ein solches element neben tooltip würde position <span> innerhalb es anders.
- Leider ist dies nicht eine option für mich wie ich eine lange Liste von Dingen und jeder sollte seine eigenen tooltip. Die Anzahl der Elemente groß genug sind, muss der Benutzer einen Bildlauf nach oben und unten in seinem browser-Fenster, also was war an der Unterseite des Bildschirms an einem Punkt sein kann, an der Oberseite des Bildschirms in die andere Sekunde.
- Es ist definitiv Zeit für JavaScript, sorry!
InformationsquelleAutor Wojciech Maj
0

Denke ich, werden Sie wahrscheinlich benötigen, um einige javascript - /jquery-es.

Werfen Sie einen Blick auf diesen Beitrag:

Erkennen, ob dropdown-navigation gehen würde off-screen und positionieren Sie es

Das problem ist ähnlich wie deine, aber mit einem dropdown.

InformationsquelleAutor King Clauber

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.