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

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

试试这个：

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

Answer 2

只是一个快速的想法，尚未最终确定，为什么不使用 jquery 来缩短文本而不是 css？使用 css，您的 a 标签仍然是全宽而不是 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>