鼠标悬停应用于jQPLOT X轴标记 [英] Mouse hover applied to jQPLOT X AXIS TICKS

问题描述

我正在尝试将鼠标悬停功能添加到轴刻度中. 我想要的是仅在悬停时显示长刻度线全文，否则将仅显示几个字符.我正在向.jqplot-xaxis-tick添加一个悬停事件，但它甚至没有响应悬停.请建议！

I am trying to add mouse hover function to my axis ticks. what i want is to show long ticks full text only on hover else it would be showing only few characters . i am adding a hover event to .jqplot-xaxis-tick .But it doesnot even respond to hover.Please suggest !

.jqplot-xaxis-tick {
    top: 0px;
    /* initial position untill tick is drawn in proper place */
    left: 15px;



/*    padding-top: 10px;*/
    vertical-align: top;
     overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}
.jqplot-xaxis-tick :hover{
overflow:visible;

    white-space: normal; 
    width: auto;
    position: absolute;
    background-color:yellow;
}

推荐答案

由于画布的z索引位于整个图表的顶部，因此无法检测到悬停.我做了以下操作，现在它通过CSS省略号简化了tootip，并在悬停时显示了带有全名的工具提示.

The hover is not detecting because of the z-index of the canvas which lies on top of the whole chart. I did the following and now it's shorten the tootip by CSS ellipsis and show the tooltip with full name on hover.

基于 Gyandeep的答案，我使用的确切的JS和CSS是

Based on the Gyandeep's answer, the exact JS and CSS I used are,

Javascript:

$('div.jqplot-xaxis-tick').each(function (i, obj) {
    $(this).prop('title', ($(this).text()));
    $(this).css('z-index', 999);  // this is important otherwise mouseover won't trigger.
});

CSS:

.jqplot-xaxis .jqplot-xaxis-tick {
    position: absolute;
    white-space: pre;
    max-width: 92px;  // Change it according to your need
    overflow: hidden;
    text-overflow: ellipsis;
}

每次绘制图表后，都需要执行JavaScript部分.最好在绘制图表后将它们放在正确的位置，并可以将其放置在AJAX成功处理程序中.

The JavaScript part needs to be executed after every rendering of chart. It's better to put them right after plotting the chart and may in the AJAX success handler.

这篇关于鼠标悬停应用于jQPLOT X轴标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！