如何通過焦點在HTML元素上顯示標題

是否有任何Jquery或任何其他方式來顯示元素的標題給予焦點，就像在懸停時顯示的標題一樣？如何通過焦點在HTML元素上顯示標題

我已經找到了這個jquery，但它不工作.....任何人都可以幫忙請...在此先感謝!!!!!!!!!!

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

來源

2014-11-20 Sushy

請嘗試http://jqueryui.com/tooltip/ – dizel3d 2014-11-20 17:57:07

爲什麼模糊處理從文檔中移除的元素是沒有意義的。 – epascarello 2014-11-20 18:01:46

焦點事件沒有x和y位置。您需要使用元素的偏移

http://api.jquery.com/offset/

來源

2014-11-20 18:04:14 epascarello

使用JQuery UI Tooltip。它處理冒泡mouseover,mouseleave,focusin,focusout事件在document默認情況下。你只需要防止鼠標事件的傳播。

$(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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css" rel="stylesheet"/> 
 

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

來源

2014-11-20 18:10:33 dizel3d

謝謝......我會看看我是否可以重新使用外部API ... – Sushy 2014-11-25 21:22:44

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

應該工作。看，媽媽，沒有JS！

你只需要定位pseudo :: after元素。

注意，這隻有在「僞父」允許僞元素時纔有效。

來源

2014-11-20 18:13:32 Matijs

因此，你可以舉個例子嗎？ http://jsfiddle.net/b55gb21m/ – dizel3d 2014-11-20 18:26:46

不能有一個僞元素不幸... – Matijs 2014-11-20 18:45:30

感謝Matijs fr解決方案...但我有焦點元素也...我可以在這種情況下做？ – Sushy 2014-11-25 21:10:15

如何通過焦點在HTML元素上顯示標題

回答

相關問題