Question

我需要使用工具提示设置highcharts，该工具提示会将鼠标悬停在图表标题上的图标上。我使用过选项：

title: {
  useHTML: true,
  text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Arbeidsmarkedsintegrasjon'
},

Here是工作示例。

现在设置方式，工具提示触发非常缓慢，只需几秒钟即可查看工具提示文本。我想知道如何设置它以便在悬停时立即触发。

Answer 1

这里几个选项：

使用粉底，据我所知你使用了来自Zurb Foundation的.has-tip课程 http://jsfiddle.net/mu9wswv3/9/
附： dunno为什么箭头样式被打破

或使用伪元素

.has-tip{
  position: relative;
}

.has-tip:after {
  display: none;
  box-sizing: border-box;
  font-size: .7em;
  content: attr(data-title);
  position: absolute;
  background: rgba(249, 249, 249, 0.85098);
  border: 1px solid rgb(124, 181, 236);
  padding: 5px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.has-tip:hover:after {
  display: block;
}

P.S。在这种情况下，title必须替换为data-title

http://jsfiddle.net/sLhmxtko/

Highcharts - 工具提示触发元素悬停非常慢

1 个答案: