Question

在包含嵌套div的HTML文档中，我想在输入其中一个div时创建一个触发的工具提示。工具提示文本值是通过连接从当前元素的父项获取的数据来生成的。下面的示例脚本几乎正在做我想要的但是： - 工具提示始终显示在左侧， - 某些工具提示会保留在屏幕上并且未正确删除 - 虽然track：true属性，但工具提示不会跟随鼠标指针 - 它不流畅。

有人可以帮忙吗？非常感谢！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
   .c1 {
      margin-left: 10%;
      border-left:solid;
      border-width:1px;
   }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div class="c1" data-rank="hello">This is div 1
  <div class="c1" data-rank="world">This is div 2
    <div class="c1" data-rank="how">This is div 3
      <div class="c1" data-rank="are">This is div 4
        <div class="c1" data-rank="you ?">This is div 5<br/><br/><br/>
        </div>
      </div>
    </div>
  </div>
</div>
<script style="text/javascript">
$("[data-rank]").mouseenter(
function showRank(event){
    // delete previous tooltips
    var tips = $('.ui-tooltip');
    if (tips) {
    $tips = null;;      
    };
    // create the text
    var lineage = $(this).attr('data-rank');
    $(this).parents().each(
    function(i,e) {
        var rk = $(e).attr('data-rank');
        if (rk) {
        lineage = rk + "; " + lineage;
        }
    }
    );
    // create the tooltip
    $(this).tooltip({
    track: true,
    content: lineage,
    items: "[data-rank]"
    })
}
)
</script>
</body>
</html>

Answer 1

好的，在您的function showRank()进行如下更改并删除部分

    var tips = $('.ui-tooltip');
    if (tips) {
    $tips = null;;      
    }; //Remove this part

$("[data-rank]").mouseenter(
    function showRank(event){

        // delete previous tooltips
        $( ".ui-tooltip" ).tooltip( "destroy" );

        // create the text
        var lineage = $(this).attr('data-rank');
        $(this).parents().each(
        function(i,e) {
            var rk = $(e).attr('data-rank');
            if (rk) {
            lineage = rk + "; " + lineage;
            }
        }
        );
        // create the tooltip
        $(this).tooltip({
        track: true,
        content: lineage,
        items: "[data-rank]"
        })
    });

如果有任何问题，请告诉我

Answer 2

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
   .c1 {
      margin-left: 10%;
      border-left:solid;
      border-width:1px;
   }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="1" class="c1" data-rank="hello">This is div 1
  <div id="2" class="c1" data-rank="world">This is div 2
    <div id="3" class="c1" data-rank="how">This is div 3
      <div id="4" class="c1" data-rank="are">This is div 4
        <div id="5" class="c1" data-rank="you ?">This is div 5<br/><br/><br/>
        </div>
      </div>
    </div>
  </div>
</div>
<script style="text/javascript">
$("[data-rank]").mouseenter(
function showRank(event){
    // delete previous tooltips
    var tips = $('.ui-tooltip');
    if (tips) {
    $('.ui-tooltip').remove();      
    };
    // create the text
    var lineage = $(this).attr('data-rank');
    $(this).parents().each(
    function(i,e) {
        var rk = $(e).attr('data-rank');
        if (rk) {
        lineage = rk + "; " + lineage;
        }
    }
    );
    $('.ui-tooltip').remove();
    // create the tooltip
    var idTag = $(this).attr('id');
    $(this).tooltip({
    track: true,
    content: lineage,
    items: "[data-rank]",
    position: {
              using: function( position, feedback ) {
                $( this ).css( 'margin-left', idTag + '0%');
            }
          },
    })
}
)
</script>
</body>
</html>

Answer 3

感谢您的帮助，解决了部分问题！

一位朋友发给我（虽然我强烈建议他订阅StackOverflow !!）这是一个非常优雅的解决方案： https://jsfiddle.net/n4yax3ga/5/

重点是使用工具提示功能：

$(document).ready(
function() {
    $(document).tooltip({
    items: '[data-rank]',
    content: function(){
        var lineage = $(this).data('rank');
        $(this).parents().each(
        function(i,e) {
            var rk = $(e).data('rank');
            if (rk) {
            lineage = rk + "; " + lineage;
            }
        }
        );
        return lineage;
    },
    track: true
    });
}
);

工具提示CSS也应该更改：

.ui-tooltip {
  position: absolute;
  top: 100px; left:100px;
}

嵌套div上的工具提示构造和删除

3 个答案: