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

Question

我正在检测文本太长而无法显示，所以如果它很长，我会使用CSS减少它们并放置一个包含整个文本的工具提示，但如果它不长，则将其设为绿色。 请注意以下几点：

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

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

$(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改变文本的大小，它将在标签上具有正确的宽度。 / p>

$(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

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

.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);
    
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;