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

onIouse在CodeIgniter中

1 个答案: