Question

I wrote a abbrevation in html something like this,

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

This piece of code show the abbrevation just for 4 or 5 seconds.
Is is posible to customize this time ??

Answer 1

No, this is handled entirely by the browser, and is inaccessible to the user or web-developer to change, read or edit the time of visibility.

You could, with JavaScript create an element that will contain the text of the title attribute the visibility of which would be explicitly under your control.

---

Edited because it occurred to me that I should try and offer an example of alternatives (rather than just saying ‘they exist’), so, a CSS example (I’m using CSS generated content in this implentation, which unfortunately doesn’t allow for CSS transitions, so it just appears, and remains in place until you mouse-out from the abbr element):

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.

This does require the user to have a browser that supports CSS generated content, since if there was a title attribute you’d have both the CSS pop-up and the default title showing up which is neither terribly useful or particularly pretty.

An alternative is using nested elements and CSS transitions, which gracefully degrades in those browsers that don’t support transitions (the content simply ‘appears’, but at least it’s available):

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.

And a JavaScript approach (which is kind of ugly, frankly):

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.