Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Replacement for Title attribute that work in touch screen environment

I have to use title attribute to show the entire text in case the label size decreases and forces an ellipsis. Now the problem is my page might be accessed by touch interface users and they might not have the option to hover (apart from galaxy note users).

I was hoping someone is aware of a control within HTML5/HTML for touch devices which will toast the title text on the screen next to a div on tapping the div for complete text.

like image 935
Shouvik Avatar asked Mar 15 '13 05:03

Shouvik


1 Answers

See usage of title & abuse of title tags. HTML5 has not spoken on this so far.

You might need to implement the double tab event yourself using js or use jquery doubletap

Alternatively, hover event is implemented by many mobiles devices to be fired on the first tap... fiddle

CSS

span {
    width: 100px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

span:hover {    
    overflow: visible;
}

HTML Code

<span>Test test test test test test</span>
like image 84
loxxy Avatar answered Oct 29 '22 15:10

loxxy