如何使用 jquery 在 mouseenter 上显示全文？

Question

我有一个像 "mouseenter I will be displayed" 这样的字符串分配给一个变量。但我只想通过对话框或弹出信息在 mouseenter 上显示用户 "mouseenter I will be disp..." 和整个文本。字符串是动态的，它会在不同的情况下发生变化。同样在 mousedown 对话框上应该隐藏。

编辑：

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;

一旦用户在 "i am ..." 上输入鼠标，我想显示一个小弹出窗口来显示整个内容，一旦用户从 "i am ..." 上移除鼠标，弹出窗口将被隐藏或删除。

Answer 1

也许我有点太"creative"这里，或者不明白-但你实际上不只是想要一个<div>和text-overflow: ellipsis你可以动态分配两个文本并提示（标题）到？如果你有 <div> :

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

和 CSS :

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

最后通过JS分配内容，你会得到想要的结果（我想）：

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

演示 -> http://jsfiddle.net/2rvzn2qn/

Answer 2

我使用 jquery 版本是因为，正如我告诉过你的，我不知道 javascript 语法。

首先，HTML：

<p class="text"></p>
<div id="dialog">
    <p></p>
</div>

然后是JS :

$(document).ready(function () {
    var orignalData = 'i am complete text';

    if (orignalData.length) {
        var incompleteData = orignalData.substring(0,5);
        incompleteData += '...';
        $('.text').text(incompleteData);
    }

    $('.text').hover(function() {
        $('#dialog').dialog({
            modal: true,
            open: function() {
                $(this).html(orignalData);
            }
        });
    });
});

在我的 fiddle 示例中，对话框没有 css。我让你看看

如何使用 jquery 在 mouseenter 上显示全文？

How to show full text on mouseenter using jquery?

jquery

tooltip

mouseevent