如何使用jQuery顯示標題屬性onfocus？

默認情況下，在所有瀏覽器中，標題屬性僅在鼠標懸停時顯示。我也想在鍵盤焦點上顯示。我知道這僅僅通過HTML和CSS是不可能的。如何使用jQuery顯示標題屬性onfocus？

將需要JavaScript。所以我幾乎在所有項目中都使用jquery。所以我需要一個jQuery解決方案來顯示onfocus的標題。

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

後來補充說：

在谷歌搜索了很多後，我發現一個JavaScript解決方案

現在我只需要這個

一個jQuery版本在這裏看到：http://www.brothercake.com/scripts/tooltips/tooltips.html

來源

2010-03-21 Jitendra Vyas

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"/>

只爲這裏的編碼相同的樂趣，但對於鋰NK元素

$('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>

來源

2010-03-21 19:48:08

是這個jQuery代碼？你有沒有看到我的問題 – 2010-03-21 19:49:35

問題中的添加鏈接對不起，我還沒有閱讀添加的鏈接，但是，這是我知道的使工具提示的簡單方法！是的，它是jQuery！希望這個幫助！ – 2010-03-21 19:53:26

啊，反正方法幾乎是一樣的，拿到位置，抓焦點事件，獲得標題，追加體冠，顯示花哨，刪除它，重新開始......！ ;-) – 2010-03-21 19:55:23

有一些像qTip這樣的插件可以讓你做這是一個跨瀏覽器的方式。我懷疑你可以可靠地觸發原生工具提示。 qTip代碼非常簡單：

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

我不知道它是否支持多顯示事件（在你的情況下，鼠標懸停和對焦）。

來源

2010-03-21 19:23:11

我不想要這種類型的東西。我只想在onfocus上顯示瀏覽器的默認鼠標懸停工具提示 – 2010-03-21 19:27:15

@jitendra - 我不認爲這是可能的。這是一個由各個瀏覽器實現的功能，並不是通過代碼訪問的東西，我不覺得抱歉。 – wows 2010-03-21 19:31:45

@Wows - 有可能 - 查看我更新的問題 – 2010-03-21 19:46:37

提出的Onfocus tooltips筆者使用自己的代碼。

jQuery不是必須的，因爲代碼可以對文檔中的所有元素進行工具提示。如果您想要動態生成工具提示元素，則可能需要自行修改腳本。

來源

2010-03-21 19:50:21 strager

如何使用jQuery顯示標題屬性onfocus？

回答

相關問題