設定時間abbrevation標籤在HTML

Question

我在HTML這樣的事情寫了abbrevation，

<abbr title="How are you">HAY</abbr> 

這段代碼顯示abbrevation只爲4或5秒。 是否可以定製這個時間？

Answer 1

不，這完全由瀏覽器處理，並且用戶或網絡開發人員無法訪問以更改，讀取或編輯可見性時間。

您可以使用JavaScript創建一個元素，該元素將包含title屬性的文本，該文本的可見性將明確受您控制。

---

編輯，因爲它發生，我認爲我應該嘗試，並提供替代品（而不是僅僅說「它們存在」），所以，一個CSS的例子（我使用的CSS生成的內容中的一個例子這implentation，不幸的是不允許CSS過渡，所以它只是出現，並保持在適當位置，直到你從abbr元素鼠標移開）：

HTML：

<abbr data-title="Cascading Style Sheets">CSS</abbr>​ 

CSS：

abbr[data-title] { 
    position: relative; 
    border-bottom: 2px dashed #aaa; 
    cursor: help; 
} 
abbr[data-title]::after{ 
    display: none; 
    position: absolute; 
    content: attr(data-title); 
    top: 90%; 
    left: 90%; 
    color: #f90; 
    background-color: rgba(0,0,0,0.7); 
    padding: 0.4em; 
    border-radius: 0.7em; 
} 
abbr[data-title]:hover::after { 
    display: block; 
} 

JS Fiddle demo。

這確實需要用戶擁有一個支持CSS生成內容的瀏覽器，因爲如果有title屬性，您將擁有CSS pop-up and the default title showing up這不是非常有用或特別漂亮。

的方法是使用嵌套的元素和CSS的轉變，其緩慢下降在那些不支持轉換的瀏覽器（簡稱爲「出現」的內容，但至少它的可用）：

HTML：

<abbr>CSS<span>Cascading Style Sheets</span></abbr>​ 

CSS：

abbr { 
    position: relative; 
    border-bottom: 2px dashed #aaa; 
    cursor: help; 
} 

abbr span { 
    position: absolute; 
    top: 90%; 
    left: 90%; 
    padding: 0.4em; 
    color: #f90; 
    background-color: rgba(0,0,0,0.7); 
    border-radius: 0.7em; 
    opacity: 0; 
    width: 0; 
    height: 0; 
    overflow: hidden; 
    -moz-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -webkit-transition: all 1s linear; 
    transition: all 1s linear; 
} 

abbr:hover span { 
    opacity: 1; 
    width: 8em; 
    height: 4em; 
    -moz-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -webkit-transition: all 1s linear; 
    transition: all 1s linear; 
} 

JS Fiddle demo。

而且一個JavaScript的方法（這是一種醜惡的，坦率地說）：

if (document.querySelectorAll) { 
    var elems = document.querySelectorAll('[title]'); 
} 
else { 
    var firstPass = document.getElementsByTagName('*'), 
     elems = []; 
    for (var i = 0, len = firstPass.length; i < len; i++) { 
     if (firstPass[i].title) { 
      elems.push(firstPass[i]); 
     } 
    } 
} 

for (var i = 0, len = elems.length; i < len; i++) { 
    elems[i].onmouseover = function(e) { 
     // cache variables for subsequent use: 
     var that = this, 
      helpText = this.getAttribute('data-title') || this.title; 
     // create a useable attribute and stop the original title from showing up, 
     // if the attribute to use doesn't already exist: 
     if (!that.getAttribute('data-title')) { 
      that.setAttribute('data-title', helpText); 
      that.removeAttribute('title'); 
     } 
     // create an element to contain the popup-text or find the 
     // already-created element if it already exists: 
     var id = helpText.replace(/(\W)/g, ''), 
      popup = document.getElementById(id) || document.createElement('div'); 
     // setting the id to its own id (if it already existed) 
     // or, if it's newly-created, to the white-space-removed help-text 
     popup.id = popup.id || id; 
     // creating a text-node for the help-text: 
     var text = document.createTextNode(helpText); 
     // appending that text-node to the popup if that text node doesn't already exist: 
     if (!popup.firstChild) { 
      popup.appendChild(text); 
     } 
     // setting the styles (adjust to taste): 
     popup.style.display = 'block'; 
     popup.style.color = '#f90'; 
     popup.style.backgroundColor = '#000'; 
     popup.style.position = 'absolute'; 
     popup.style.top = that.offsetHeight * 0.9 + 'px'; 
     popup.style.left = that.offsetWidth * 0.9 + 'px'; 
     popup.style.padding = '0.3em'; 
     document.getElementsByTagName('body')[0].appendChild(popup); 
    }; 
    elems[i].onmouseout = function() { 
     // finding the id of the popup (since it's predictably created) 
     var id = this.getAttribute('data-title').replace(/(\W)/g, ''); 
     // finding the element with that id, and hiding it 
     document.getElementById(id).style.display = 'none'; 
    } 
}​ 

JS Fiddle demo。