如何按照table某列数据显示tooltip？

Question

我创建了 js 树来显示文件夹路径名。我的问题是如何按照数据库 table 的某些列数据显示工具提示。

下面是我的编码，这个编码<div id="folder_jstree" title="JTM"></div>我只是硬编码写标题“JTM”来显示工具提示：


  <?php 
   $folderData = mysqli_query($mysql_con,"SELECT * FROM folders");

   $folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
      $parentid = $row['parentid'];
      if($parentid == '0') $parentid = "#";

      $selected = false;$opened = false;
      if($row['id'] == 2){
         $selected = true;$opened = true;
      }
      $folders_arr[] = array(
         "id" => $row['id'],
         "parent" => $parentid,
         "text" => $row['name'],
         "state" => array("selected" => $selected,"opened"=>$opened) 
      );
   }

   ?>

   <!-- Initialize jsTree -->
   <div id="folder_jstree" title="JTM"></div>
   <!-- Store folder list in JSON format -->
   <textarea style="display:none;" id='txt_folderjsondata'><?= json_encode($folders_arr) ?></textarea>


<script>
$(document).ready(function(){
   var folder_jsondata = JSON.parse($('#txt_folderjsondata').val());

   $('#folder_jstree').jstree({ 'core' : {
      'data' : folder_jsondata,
      'multiple': false
   } });

});

  $( function() {
    $( document ).tooltip();
  } );

</script>

下面是我的数据库 table 名称是 folders，我需要按照 table name 显示 table category工具提示。例如，如果我在 JS 树中鼠标指针 MPK 400 Pengurusan Kewangan，那么工具提示将显示 categroy 名称是 'JKP'。我在 table folders 中显示了三种类型，有 JKP,JTM 和 'JTM (Berhubung Kod 100-1/1/2)':

[Table name is folders]1

下面是我的输出： [Output]2

希望有人能指导我或给我看例子来解决这个问题。谢谢。

Answer 1

您可以在 jstree 悬停事件上应用工具提示。您必须将工具提示文本保留在节点的数据中。

在 php 代码中，您可以在数组

中包含 category 列

 $folders_arr[] = array(
    "id" => $row['id'],
    "parent" => $parentid,
    "text" => $row['name'],
    "category" => $row['category'],
    "state" => array("selected" => $selected,"opened"=>$opened) 
 );

在 jsTree 初始化后的 javascript 代码中，您可以设置事件处理程序。

$('#folder_jstree').bind('hover_node.jstree', function (e, data) {
    $("#" + data.node.id).attr("title", data.node.original.category);
});

如何按照table某列数据显示tooltip？

How to follow table certain column data to show the tooltip?

jquery

sql

jstree