Как показать атрибуты заголовка на фокусе с помощью jquery?

Question

По умолчанию во всех браузерах атрибуты заголовка отображаются только при наведении курсора. Я хочу показать на клавиатуре фокус также. Я знаю, что это невозможно только через HTML и CSS.

JavaScript будет необходим. поэтому я использую jquery почти во всех проектах. поэтому мне нужно решение jquery для отображения заголовка на onfocus.

<a title="this is title" href="#">Websites</a>

Позже добавлено:

После долгих поисков в Google я нашел решение javascript

Теперь мне просто нужна jquery-версия этого

см. Здесь: http://www.brothercake.com/scripts/tooltips/tooltips.html

Answer 1

JS код

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

        $("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");   
        });   
    });

CSS

 #tooltip{
  position:absolute;
  border:1px solid #333;
  background:#f7f5d1;
  padding:2px 5px;
  color:#333;
  display:none;
  } 

элемент HTML

 <input title="testing the focus tooltip" name="name" type="text"/>

Просто для развлечения здесь то же самое, но для Ссылка element

$('a').click(function(e) {
    e.preventDefault();
  this.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");    
    });
});

 <a title="fdsfsdfsd" href="javascript:;" >test a foucs</a>

Answer 2

Существует ряд плагинов, таких как qTip , которые позволят вам сделать это кросс-браузерным способом.Я сомневаюсь, что вы можете надежно вызвать всплывающую подсказку.qTip-код довольно прост:

$('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

Я не уверен, поддерживает ли он несколько событий шоу (в вашем случае, при наведении курсора и фокусе).

Answer 3

Попросите автора подсказок Onfocus использовать их код.

jQuery не требуется, поскольку код включает всплывающую подсказку для всех элементов в документе. Возможно, вам придется изменить скрипт самостоятельно, если вы хотите всплывающие подсказки для элементов, которые генерируются динамически.