Is there any Jquery or any other way to display the title of the elements on giving focus just as the title displayed on hovering???

I have found this jquery but its not working.....Can anyone help please... Thanks in Advance!!!!!!!!!!

$(function () {
    var xOffset = 20;
    var yOffset = 30;

    $('input').focus(function (e) {
        this.t = this.title;
        this.title = "";
        $("body").append("<span id='tooltip'>" + this.t + "</span>");
        $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
    });

    $('input').blur(function (e) {
        this.title = this.t;
        $("#tooltip").remove();

        $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
});

Is there any Jquery or any other way to display the title of the elements on giving focus just as the title displayed on hovering???

I have found this jquery but its not working.....Can anyone help please... Thanks in Advance!!!!!!!!!!

$(function () {
    var xOffset = 20;
    var yOffset = 30;

    $('input').focus(function (e) {
        this.t = this.title;
        this.title = "";
        $("body").append("<span id='tooltip'>" + this.t + "</span>");
        $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
    });

    $('input').blur(function (e) {
        this.title = this.t;
        $("#tooltip").remove();

        $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
});

• javascript
• jquery
• html

• Try jqueryui./tooltip – dizel3d Commented Nov 20, 2014 at 17:57
• 1 It makes no sense why on blur it positions the element that you removed from the document. – epascarello Commented Nov 20, 2014 at 18:01

3 Answers 3

EL:focus::after { content: attr(title); }

Should work. Look ma, no JS!

You just need to position the pseudo ::after element.

Mind this only works if the “pseudo parent” allows for a pseudo element.

focus event has no x and y position. You need to use the element's offset

http://api.jquery./offset/

Use JQuery UI Tooltip. It handles bubbling mouseover, mouseleave, focusin, focusout events on document by default. You just need to prevent mouse events propagation.

$(document).tooltip();

// prevent mouse event, handle focus events only
$('input').on('mouseover mouseleave', function(e) { e.stopPropagation(); });

body {
  font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
  font-size: 62.5%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery./ui/1.11.2/themes/black-tie/jquery-ui.css" rel="stylesheet"/>

<input title="tooltip" type="text" />