Question

我要求显示HTML中可用的每个链接的点击百分比从动态获取DB的模板。我试图显示点击使用jQuery将每个锚链接添加到String jsonString ='{"rows":[{"id_sala":"27","horas":"4","Fecha":"2014-05-05"},{"id_sala":"27","horas":"5","Fecha":"2015-04-30"}]}'; var rows= JSON.parse(jsonString).rows; //Returns an array of rows //Pass rows to the addRows method.的百分比问题是当我悬停链接时工具提示显示在范围外。能够有人帮助我显示工具提示只有当我徘徊在锚点上时链接？或者请给我一个更好的解决方案.. 我在下面的fiddler链接中附加了所有示例代码。请找到示例小提琴和代码。

JSFiddle

data-title

$(document).ready(function() {
   var anchors = [];
   $(this).find("a").each(function() {
     anchors.push($(this));
   });

   for (i = 0; i < anchors.length; i++) {
     var _ele = '100%'
     $(anchors[i]).attr('data-title', _ele);
   }
});

a {
  color: #900;
  text-decoration: none;
}
a:hover {
  color: red;
  position: relative;
}
a[data-title]:hover:before {
  width: 55px;
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear, left top, left bottom, color- stop(0, #eeeeee), color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Answer 1

将其设置为:after以确保其z-index始终大于其父级。在相对父级内部使用绝对定位来控制位置

https://jsfiddle.net/Panomosh/6ywncLh3/3/

工具提示显示了锚标记的td元素

1 个答案: