javascript - Replacement for Title attribute that work in touch screen environment - Stack Overflow

admin管理员组

文章数量:1401673

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 plete text.

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 plete text.

• javascript
• css
• html
• title

Share Improve this question Follow edited Mar 15, 2013 at 7:15 loxxy 13.1k22 gold badges2727 silver badges5757 bronze badges asked Mar 15, 2013 at 5:41 ShouvikShouvik 11.8k1717 gold badges6060 silver badges8989 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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>

本文标签： javascriptReplacement for Title attribute that work in touch screen environmentStack Overflow