Javascript onmouseover编码点火器

我有一个视图，其中显示了一些带有复选框的标题。当我把光标放在标题上时，我想在一个包含标题描述的框中显示一些文本。我试着把$row['description']的标题放进去，但看起来不太好。我想配置一个框，其中显示了$row['pubdate']和$row['description']的标题。我已经在MouseOver上试过了，但我不知道怎么做这个功能。要帮忙吗

<?php 
  foreach ($query as $row){
    echo  '<tr><td>
      <label class="checkbox">
      .form_checkbox('delete[]', $row['link']).anchor("site/see_art/".$row['feed_id'],$row['title'],'title='.$row['title'].'').
        "</td><td>".substr($row['pub_date'], 5, 12).
      "</label>
    </td></tr>";
  } 
?>

在标签中放置一个带有position:absolute的div，并将其显示在鼠标上方：

HTML:

JS:

注意：这不适用于IE8，IE8没有querySelector。使用JQuery可能会更容易

---

您的标签标签介于2 td之间。不好，您可以添加一个带有标题的隐藏div，并仅在悬停时显示它。JQuery非常简单，在纯JS中稍微复杂一点。我尝试将描述放在标题中，但它只显示第一个单词。我尝试了您的代码，但不起作用。你能开个聊天室谈谈你的朋友吗

<label class="checkbox">
    <INPUT type="checkbox" name="nom"/> Checkbox 1
    <div class="tooltip">title blablabla 1
        <span class="postdate">Date: 2014/03/24</span>
    </div>
</label>

var ele = document.querySelectorAll(".checkbox");
for(var i=0; i < ele.length; i++){
    ele[i].addEventListener("mouseover", function(event){
        var x=event.clientX;
        var y=event.clientY;
        var tooltip = this.querySelector(".tooltip");
        tooltip.style.display="block";
        tooltip.style.top=y+"px";
        tooltip.style.left=x+"px";
    });
    ele[i].addEventListener("mouseout", function(el){
        this.querySelector(".tooltip").style.display="none";
    });
}