显示动态内容的工具提示


Show tooltip for dynamic content

我有下面的HTML代码,它显示了带有信息的动态行数,然后有一个图像链接,我单击该链接可以基于compentence_ID字段获得关于单击的行的一些特定信息。。

            echo "<td>".$compi['Competence_ID']."</td>";
            echo "<td><p style='text-align: center;'>".$compi['Competence_Group']."</p></td>";
            if(isset($compi['Competence_class'])){echo "<td>".$compi['Competence_class']."</td>";}else echo "<td><p style='text-align: center;'>-</p></td>";
            echo "<td>".$compi['Competence_Description']."</td>";
            echo "<td class='evaluation'>";
                echo "<select class='ownlevelselect' id='ownlevelselect-.".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";
                   if (isset($compi['ownlevel']) && $compi['ownlevel']!= '' && !empty($compi['ownlevel']) && $compi['ownlevel']!= 0) {
                      echo "<option selected value='".$compi['ownlevel']."' selected='selected'>".$compi['ownlevel']."</option>";
                    }
                    echo "<option value='' >--</option>";
                    echo "<option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option>";
                echo "</select>";
                echo $compi['ownlevel'];
// Below are the links I click to view the content
                echo '<a target="_blank" href="'.INDEX.'?categ='.$_GET['categ'].'&action='.$_GET['action'].'&subaction=viewlevels'.'&levels='.$compi['Competence_ID'].'">';
                echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';
            echo "</td>";
            echo "<td>";

这是有效的,我可以根据发布的ID看到相应的信息。但我想知道是否有任何方法可以在工具提示中显示该信息,而无需单击链接并POST ID。这是一个从DB中检索数据的脚本,我在单击图像时显示了这个脚本。

    function fetchlevels($Competence_id){
    $this->query="SELECT * FROM levels WHERE comp_id=".$_REQUEST['levels'];
    $tulos=$this->suoritaKysely();
    return $tulos;
}

简单的答案是:您可以使用ajax来完成。

我们可以在这里提供确切的代码,但你可能想了解这个概念,所以我相信下一个视频教程是一个很好的起点。

youtube视频教程:在鼠标上加载动态内容

在视频描述中,您可以找到视频教程及其相关文件的下载链接。你需要的是第二个例子。

为了让这个例子发挥作用,你只需要更改配置文件:connect.php和这个数据库

--

--数据库:ajax


--

--表data的表结构

如果data不存在,则创建表(CCD_ 5 int(11(NOT NULL AUTO_INCREMENT,CCD_ 6 varchar(45(不为空,CCD_ 7 varchar(45(不为空,CCD_ 8 varchar(45(不为空,主键(id()ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=11;

--

--表data的转储数据

插入data(idtitlefnamelname(值(1,"Web Developer","Chris","Johnson"(,(2,"Web Designer"、"Joe"、"Black"(,(3,"老师","杰森","麦金托什"(,(4,"居家男人","Jake","Kawaguchi"(,(5,"Sans Man Card"、"Brett"、"Williams"(,(6,"我不知道…","托弗","豪登"(,(7,"Gamer"、"Jason"、"Luzader"(,(8,"Wingman"、"Chuck"、"Strong"(,(9,"篮球运动员","查克","巴克利"(,(10,《歌手》、《玛尔塔》、《佐雷》(;

代码内

echo '<a target="_blank" compId='$compi['Competence_ID']' href="#">';
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';

如果上面的PHP代码有问题,请原谅。基本思想是在锚标签的属性上设置id

 <script>
  $( document ).tooltip({
  items: "img",
  content: function() {
    var element = $( this );
    var parent=element .parent();
    if ( element.is( "img" ) ) {
      var text =  $.ajax({ type: "GET", url: remote_url, async: false, }).responseText;//remoe_url is url of your PHP whenre you have code to return the content in tooltip. You can take id as parent.attr('compId')
      return text;
    }
  }
 });
  </script>