如何在垂直方向上设置元素？

Question

这是我的代码：

$(document).ready(function(){
  $('a').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setTimeout(function() {
      var tag_name = self.text(),
          top      = self.position().top + self.outerHeight(true),
          left     = self.position().left;
      $('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
      $(".tag_info").css({top: top + "px", right: left + "px"}).fadeIn(200);   
    }, 525);
  }).bind('mouseleave', function(){
    if(this.iid){
      clearTimeout(this.iid)
      $('.tag_info').remove();
    }
  });
});

    body{
      padding: 20px;
      direction: rtl;
    }

    a {
        color: #3e6d8e !important;
        background-color: #E1ECF4;
        padding: 2px 5px;
    }
    .tag_info{
      position: absolute;
      width: 130px;
      height: 100px;
      display:none;
      background-color: black;
      color: white;
      padding: 10px;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a>long-length-tag</a>
    <a>tag</a>

如你所见，弹出窗口远远超过悬停元素。虽然我希望它们在右侧侧与（垂直）位于同一行。

我该怎么做？

Answer 1

更改此

$(document).ready(function(){
  $('a').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setTimeout(function() {
      var tag_name = self.text(),
          top      = self.position().top + self.outerHeight(true),
          right     = self.position().right; // Update this
      $('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
      $(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);   
    }, 525);
  }).bind('mouseleave', function(){
    if(this.iid){
      clearTimeout(this.iid)
      $('.tag_info').remove();
    }
  });
});

使用示例代码

更新左侧变量

left = self.position().left;更新为right = self.position().right;

也是这个变量

$(".tag_info").css({top: top + "px", right: left + "px"}).fadeIn(200);

到

$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);

＆＃13;

＆＃13;

$(document).ready(function(){
  $('a').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setTimeout(function() {
      var tag_name = self.text(),
          top      = self.position().top + self.outerHeight(true),
          rightside    = self.right();
      $('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
      $(".tag_info").css({top: top + "px", right: rightside + "px"}).fadeIn(200);   
    }, 525);
  }).bind('mouseleave', function(){
    if(this.iid){
      clearTimeout(this.iid)
      $('.tag_info').remove();
    }
  });
});
$.fn.right = function() {
  return $(document).width() - (this.offset().left +      this.outerWidth());
}

＆＃13;

body{
      padding: 20px;
      direction: rtl;
    }

    a {
        color: #3e6d8e !important;
        background-color: #E1ECF4;
        padding: 2px 5px;
    }
    .tag_info{
      position: absolute;
      width: 130px;
      height: 100px;
      display:none;
      background-color: black;
      color: white;
      padding: 10px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a>long-length-tag</a>
    <a>tag</a>

＆＃13;

＆＃13;

＆＃13;

修改

添加此新功能

$.fn.right = function() {
   return $(document).width() - (this.offset().left + this.outerWidth());
}

并更新此行

right = self.position().right; 

到

right = self.right();

希望它会对你有所帮助。

Answer 2

将left = self.position().left;更改为right = self.position().right;

改变＆＃34;离开＆＃34;进入＆＃34;对＆＃34;在css。

$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);