我如何指定工具提示的正确位置？

Question

我正在检测文本显示的时间太长，所以如果它很长，我使用CSS缩小它们，并放置一个包含整个文本的工具提示，但如果时间不长，请将其设置为绿色。 Ocurres如下：

它把在完全文本的中心，而不是在短路的文本。我怎么能放在中心，但在短文本，而不是在长文本？

如果你想我所有的代码，它在这里：

$(document).ready(function() { 
 
    $('[data-toggle="tooltip"]').tooltip(); 
 
}); 
 
$(function() { 
 
    $('.txt').each(function(i) { 
 
    if (isEllipsisActive(this)) { 
 
     $(this).attr("data-original-title", $(this).text()); 
 
    } else $(this).css({ 
 
     'color': 'green' 
 
    }); 
 
    }); 
 
}); 
 

 
function isEllipsisActive(e) { 
 
    return (e.offsetWidth > 95); 
 
}

.demo { 
 
    max-width: 95px; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <h3>Tooltip Example</h3> 
 
    <div class="demo"> 
 
    <a class="txt" href="#" data-toggle="tooltip" data-placement="top">Hover over meeeeeeeeeeeeeeee</a> 
 
    </div> 
 
    <div class="demo"> 
 
    <a class="txt" href="#" data-toggle="tooltip" data-placement="top">Hover over meeeeeeeeeeeeeeee</a> 
 
    </div> 
 
</div>

Answer 1

只是一个快速的想法，还没有最终确定，为什么不使用jQuery来缩短文本，而不是CSS？与CSS，你的一个标签仍然是全宽而不是95px，所以工具提示获取这个宽度来计算位置，如果你首先用jquery改变文本的大小，它将在标签上具有正确的宽度。

$(document).ready(function() { 
 
    $('[data-toggle="tooltip"]').tooltip(); 
 
}); 
 
$(function() { 
 
    $('.txt').each(function(i) { 
 
    if (isEllipsisActive(this)) { 
 
     $(this).attr("data-original-title", $(this).text()); 
 
     $(this).text($(this).text().substring(0,10)+" ..."); /* shorten text */ 
 
    } else $(this).css({ 
 
     'color': 'green' 
 
    }); 
 
    }); 
 
}); 
 

 
function isEllipsisActive(e) { 
 
    return (e.offsetWidth > 95); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <h3>Tooltip Example</h3> 
 
    <div class="demo"> 
 
    <a class="txt" href="#" data-toggle="tooltip" data-placement="top">Hover over meeeeeeeeeeeeeeee</a> 
 
    </div> 
 
    <div class="demo"> 
 
    <a class="txt" href="#" data-toggle="tooltip" data-placement="top">Hover over meeeeeeeeeeeeeeee</a> 
 
    </div> 
 
    <div class="demo"> 
 
    <a class="txt" href="#" data-toggle="tooltip" data-placement="top">Hover over</a> 
 
    </div> 
 
</div>

Answer 2

试试这个：

$(document).ready(function(){ 
 
    $('a').each(function(){ 
 
     $(this).attr('data',$(this).html()); 
 
    }) 
 
})

.demo { 
 
    position: relative; 
 
} 
 

 
a { 
 
    width: 100px; 
 
    text-overflow: ellipsis; 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
} 
 

 
a[data-toggle]:hover:before { 
 
    content: attr(data); 
 
    position: absolute; 
 
    background-color: rgba(0,0,0,0.8); 
 
    padding: 0 2px; 
 
    color: orange; 
 
    top: -14px; 
 
    border-radius: 2px; 
 
} 
 

 
a[data-toggle]:hover:after { 
 
    position: absolute; 
 
    content: '\25BC'; 
 
    top: 0px; 
 
    left: 50px; 
 
    color:rgba(0,0,0,0.8); 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <h3>Tooltip Example</h3> 
 
    <div class="demo"> 
 
    <a class="txt" href="#" data-toggle="toggle" data-placement="top">Hover over me, I am first A tag</a> 
 
    </div> 
 
    <div class="demo"> 
 
    <a class="txt" href="#" data-toggle="toggle" data-placement="top">Hover over me, I am second A tag</a> 
 
    </div> 
 
</div>