How to display title of HTML elements on focus Options

[SSharma]

Hi guys,

Is there any Jquery or any other way to display the title of the elements on giving focus just as the title displayed on hovering???

I have found this jquery but its not working.....Can anyone help please... Thanks in Advance!!!!!!!!!!
Collapse | Copy Code
$(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");
});

});

[pandy]

You could use CSS to make the content of title display on focus and then style it further to look like you want. Recent browsers will display it, oldies will not.

Something like so.

CODE

a              { text-decoration: none }
a:focus:after  { content:attr(title);
                 position: relative; top: -1.3em; left: -2em;
                 padding: .1em .2em;
                 background: #ffffd6; color: #000;
                 border: 2px solid black;
                 font-size: 75% }

HTML

<a href="http://google.com" title="Go to Google">Google</a>

Note that unlike the browser displayed title text this won't automatically move down in case the link is close to the top of the browser window, as it will be if you view the above alone in a page. So you need to think about where it's safe to position it in case you have links at the very top or bottom of the page. But you could always create two sets.

[SSharma]

Thnx Pany for the suggestion... I will use it for all elements and let know whether working for all elements as well....thanks again..

[pandy]

Well, better stick to elements that can be focused.

Alas :after doesn't seem to work with form controls. I thought it did. No idea why it doesn't. So basically this will only work with links.

[pandy]

Hmm, this note in the spec maybe explains it. Or maybe not.

"Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification."

[Christian J]

http://www.w3.org/TR/html5/dom.html#attr-title warns:

"Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet)."

I guess even the focus event is tricky to use on touch screens, so don't rely on the TITLE attribute for anything important.

[Christian J]

Here's an idea for a script that tries to detect touch screens (by the user touching the screen), and in that case restyles the page, e.g. by making the TITLE attributes on all A elements permanently visible. I haven't tested it on a touchscreen yet. Even if it works I'm not sure if using tooltips is a good idea in the first place (in any browser).

CODE

<style type="text/css">
body.touchscreen a:after {content:" (" attr(title) ") ";}
</style>

<script type="text/javascript">
if(window.addEventListener)
{
    function detect_touchscreen()
    {
        var body=document.getElementsByTagName('body')[0];
        
        // events support details from http://quirksmode.org/mobile/tableTouch.html
        window.addEventListener('touchstart', function(){body.className='touchscreen';}, false); // Most mobile browsers
        window.addEventListener('pointerdown', function(){body.className='touchscreen';}, false); // IE10
    }
    window.addEventListener('load', detect_touchscreen, false);
}
</script>