如何隐藏在用于工具提示的casperjs span中？

Question

我在表格中为单元格添加工具提示，按span：

<td align="center" style="background-color: #AEFB98;" class="tooltip">{{ status.State}}
<span> Component: {{ component }}<br/>Test Name: {{ test }}<br/></span>
</td>

这是css文件：

.tooltip {position: relative;z-index:100;}
.tooltip span {position: absolute; display: none;left: -300px;width: 300px; background-color: #e5f2fe; border: 1px solid #004c84;  background-image: -moz-linear-gradient(top, #ffffff, #e5f2fe);  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #e5f2fe));  background-image: -webkit-linear-gradient(top, #ffffff, #e5f2fe);  background-image: -moz-linear-gradient(top, #ffffff, #e5f2fe);  background-image: -ms-linear-gradient(top, #ffffff, #e5f2fe);
background-image: -o-linear-gradient(top, #ffffff, #e5f2fe);  text-align: left;  color: #0071c5  ;  padding: 8px;-webkit-border-radius: 10px;border-radius: 10px;}
.tooltip:hover {z-index:200;}
.tooltip:hover span { display: block;}

默认情况下，span不显示，并在hover中显示块。当我使用casperjs时，显示跨度（不是预期的），当我设置：

<span style=display: none>

casperjs不显示范围，但“工具提示”不正常。

我该怎么办？