html - HTMLの略語タグに時間を設定する

Question

私はhtmlでこのような略語を書きました、

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

このコードは、4秒または5秒間だけ略語を表示します。今回はカスタマイズ可能ですか？

Answer 1

いいえ、これは完全にブラウザによって処理され、ユーザーまたはWeb開発者は、表示時間を変更、読み取り、または編集するためにアクセスできません。

JavaScriptを使用すると、属性のテキストを含む要素を作成できます。この要素titleの可視性は、明示的に制御できます。

---

代替案の例を（単に「存在する」と言うのではなく）提供する必要があると思ったので編集しました。そのため、CSSの例（この意味でCSSで生成されたコンテンツを使用していますが、残念ながら許可されていません） 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フィドルデモ。

これには、CSSで生成されたコンテンツをサポートするブラウザが必要です。title属性がある場合は、CSSポップアップとデフォルトのタイトルの両方が表示されるため、非常に便利でも特にきれいでもありません。

別の方法は、ネストされた要素と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フィドルデモ。

そして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フィドルデモ。