jQuery: Tooltip anzeigen beim klicken von TAB?

MCha · 19.03.2015

Hallo Zusammen,

ich habe zwei Inputfelder. Sobald man in eins klickt wird ein Tooltip angezeigt.

Wenn ich TAB drücke und in das nächste springe, soll er auch das Tooltip anzeigen. Erst beim eintippen von einem KEY soll das Tooltip verschwinden (dies macht der auch).

Wie bekomme ich es mit den TAB hin?

Ich kann nur jQuery 1.7.2 benutzen.

jQuery Code:

Code:

jQuery('.tooltip').focus(function() {
            jQuery( this ).next( "span" ).show("slow");

            jQuery('.tooltip').keyup(function() {
                jQuery( this ).next( "span" ).hide();
            });
});

jQuery('.tooltip').focusout(function() {
            jQuery( this ).next( "span" ).hide();
});

Mein aktueller Stand:

https://jsfiddle.net/2pt8nqcx/20/

Enigmon · 20.03.2015

Habe auf die Schnelle mal einen Ansatz!!!! zurecht gepfriemelt.
Gibt mit Sicherheit bessere Lösungen. Aber vielleicht hilft Dir der Ansatz schon.

Code:

<script type="text/javascript">
        $(document).ready(function(){
            // ToolTip
            $('.tooltip').focus(function() {
                var that = $(this);
                showTooltip(that);
            
            });
            $('.tooltip').focusout(function() {
                var that = $(this);
                hideTooltip(that);
                
            });
        
            function hideTooltip($elem){
                $elem.next("span").hide();
            }
        
            function showTooltip($elem){
                $elem.next("span").show("slow");
            }
        
        });
</script>

Hier die Langversion von meinem Test:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Titel</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // ToolTip
            $('.tooltip').focus(function() {
                var that = $(this);
                showTooltip(that);
             
            });
            $('.tooltip').focusout(function() {
                var that = $(this);
                hideTooltip(that);
                 
            });
         
            function hideTooltip($elem){
                $elem.next("span").hide();
            }
         
            function showTooltip($elem){
                $elem.next("span").show("slow");
            }
         
        });
    </script>
    <style>
        .arrow_box {
    position: absolute;
    background-color: #ffdc00;
    background-image: -moz-linear-gradient(center top , #ffdc00, #e3c300);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%);
    top: 50%;
    vertical-align: middle;
    display: block;
    width: 200px;
    right: -80px;
    padding: 5px 15px;
    }

    .arrow_box p {
        padding: 0;
    }

    .arrow_box:after, .arrow_box:before {
        right: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .arrow_box:after {
        border-color: rgba(136, 183, 213, 0);
        border-right-color: #ffdc00;
        border-width: 10px;
        margin-top: -10px;
    }
    .arrow_box:before {
        /*border-color: rgba(194, 225, 245, 0);*/
        /*border-right-color: #c2e1f5;*/
        border-width: 36px;
        margin-top: -36px;

    }
    </style>
</head>
<body>
    <div class="input-group">
    <input type="text" name="name" maxlength="100" value="" class="form-control tooltip" id="password">
    <span class="tool-tip right slideIn" style="display: none;">
        <div class="arrow_box">
            <b>Tooltip</b>
            <p>Test 11 22 333</p>
        </div>
    </span>
</div>
    <br/>
<div class="input-group">
    <input type="text" name="name" maxlength="100" value="" class="form-control tooltip" id="password">
    <span class="tool-tip right slideIn" style="display: none;">
        <div class="arrow_box">
            <b>Tooltip 2</b>
            <p>mTest test tes steste</p>
        </div>
    </span>
</div>
</body>
</html>

LG
Thomas