如何在`span`前面添加一个看不见的锚？

Question

约束：支持IE7。

---

说明

我的网页上有很多<span class="sentence">。当用户点击.sentence时，我想在.sentence 的开头添加工具提示。

var $tooltip = $('<span id="tooltip-anchor"></span>').html(
                 $('<input type="button" class="tooltip" id="sentence-tooltip">'));
$('.sentence.select').prepend($tooltip);
$tooltip.hide().fadeIn(200);

结构将成为：

<span class="sentence">
  <span id="tooltip-anchor"> <!-- Anchors at the beginning of sentence.-->
    <input type="button" class="tooltip" id="sentence-tooltip"> <!-- The tooltip -->
  </span>
  text text
</span>

但是这种方法存在一个问题：当.sentence从浏览器的左边框开始时，span#tooltip-anchor会出现在浏览器的右边框，因为浏览器会突破{{1}之间的界限和#tooltip-anchor。我该如何解决这个问题？

.sentence.select只是我想要锚定#tooltip-anchor开头的一个主意。你能帮忙拿出另一个解决方案吗？

---

期望值：

• 工具提示浮动在句子开头的顶部。

• 工具提示功能不应更改句子的布局。

  .sentence

---

代码： JSFiddle here

                    [tooltip]
This is a sentence. This is
another sentence.

$.fn.extend({
  deselectSentence: function() {
    if ($(this).hasClass('select')) {
      $('#sentence-tooltip').fadeOut(200, function() {
        $(this).parent().remove();
      });
      $(this).removeClass('select');
    }
  },
  selectSentence: function() {
    $('.sentence.refresh.select').each(function() {
      $(this).deselectSentence();
    });
    var $tooltip = $('<span id="tooltip-anchor"></span>').html(
      $('<input type="button" class="tooltip" id="sentence-tooltip">'));
    $(this).prepend($tooltip);
    $tooltip.hide().fadeIn(200);

    $(this).addClass('select');
  }
});
$('.sentence.refresh').click(function() {
  if ($(this).hasClass('select')) {
    $(this).deselectSentence();
  } else {
    $(this).selectSentence();
  }
});

.sentence.refresh {
  border: solid 1px transparent;
  cursor: pointer;
  line-height: 20px;
  font-size: 20px;
}
.sentence.refresh:hover {
  background-color: #cde5fe;
  transition: .2s ease-in-out;
}
.sentence.refresh.select {
  background-color: #96cbff;
  border-color: #bbb;
}
.tooltip {
  position: absolute;
  z-index: 9999;
  border: solid 1px #bbb;
  width: 30px;
  height: 30px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background: url(Images/search.png) no-repeat;
  background-color: red;
  top: -30px;
}
.tooltip:hover {
  border-color: #96cbff;
  background-color: #96cbff;
}
#tooltip-anchor {
  position: relative;
}

Answer 1

我删除了css position内容，并将工具提示更改为在点击时显示，只是为了了解它的外观。这似乎没有你提到的问题。

它绝对可以清理，但它为您提供了一个起点，我相信它会纠正您当前的问题。

$(document).ready(function() {
  
  var $tooltip = $('<span id="tooltip-anchor"></span>').html(
                 $('<input type="button" class="tooltip" id="sentence-tooltip" value="?" />'));
  $tooltip.hide();
  $('.sentence').prepend($tooltip).on('click', function(){
    $(this).find('#tooltip-anchor').fadeIn(200);
  });
});

.tooltip {
        /*position: absolute;*/
        z-index: 9999;
        border: solid 1px #bbb;
        width: 30px;
        height: 30px;
        display: inline-block;
        *display: inline; *zoom: 1; /* IE7 inline-block fix */
        background: url(Images/search.png) no-repeat;
        background-color: #fff;
        position:absolute;
        top:-30px;
    }

#tooltip-anchor{
  position:relative;
    
}

<!-- some line breaks so the tooltip will have room to display. -->
sample text-- don't click here. This just shows that the elements above the tooltip don't shift.
<br /><br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="sentence">
  click this text to see a tool tip.
</span>

Answer 2

我发现IE7有什么问题。我使用jQuery插入.tooltip-anchor，其中添加了内联样式“zoom：1; display：inline”。 “缩放：1”会导致.tooltip-anchor和尾随文字之间出现断行。

css修改如下：

.tooltip-anchor {
    position: relative;
    *zoom: 0 !important; /* <--- Added */
}

它完美无缺。