How to show full text on mouseenter using jquery?

Question

I have a string like "mouseenter I will be displayed" assigned to one var. But I want display user only "mouseenter I will be disp..." and entire text on mouseenter via dialog or popup info. string is dynamic it will get change on different scenario. also on mousedown dialog should hide.

EDIT:

javascript

var orignalData = 'i am complete text'
if(orignalData.length){
incompleteData = orignalData.substring(0,5)
incompleteData += '...'
alert(incompleteData)
}
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + incompleteData;

once now user mouseenter on "i am ..." I want to display a small popup with displaying entire thing and once user remove mouse from "i am ..." the popup will be hide or removed.

Answer 1

Perhaps I am a little bit too "creative" here, or do not understand - but do you in fact not just want a <div> with text-overflow: ellipsis you dynamically can assign both text and hint (title) to? If you have a <div> :

<div id="divID"></div>

and the CSS :

#divID {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 50px;
    white-space: nowrap;
}

and finally assigning the content through JS, you will get the desired result (I suppose) :

var originalData = 'i am complete text'
var div = document.getElementById('divID');
div.innerText = originalData;
div.title = originalData;

demonstration -> http://jsfiddle.net/2rvzn2qn/