CodeIgniter中的onmouseover

Question

我有一個視圖，其中顯示了一些帶有複選框的標題。當我將光標放在標題上時，我想將一些文本顯示在一個包含標題描述的框中。我嘗試輸入標題$row['description']，但它看起來不正常。我想配置一個框，其中顯示標題$row['pubdate']和$row['description']。我試過onmouseover但我不知道如何去做這個功能。一些幫助？

<?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>"; 
    } 
?> 

Answer 1

把div與position:absolute在label，並顯示在鼠標懸停：

HTML：

<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> 

JS：

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"; 
    }); 
} 

注意：這不會一起工作IE8，IE8沒有querySelector。使用JQuery可能會更容易。

FIDDLE DEMO