ツールチップの正しい配置を指定するにはどうすればよいですか？

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

代わりにCSSのテキストを短くするためにjqueryのを使用しない理由だけで簡単にアイデア、まだ確定していませんか、？ 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>