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

I am created the js tree to show the folder path name. My problem how to follow database table certain column data to show the tooltip.

Below is my coding, this coding <div id="folder_jstree" title="JTM"></div> I just hardcode to write the title “JTM” to show the tooltip:

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

Below is my database table name is folders, I need follow the table name to show the table categoryin the tooltip. For example, if I mouse pointer MPK 400 Pengurusan Kewangan in the JS tree, then the tooltip will show me the categroy name is ‘JKP’. I have three types show in the table folders , there are JKP,JTM and ‘JTM (Berhubung Kod 100-1/1/2)’:

[Table name is folders]1

Below is my output: [Output]2

Hope someone can guide me or show me the examples to solve this problem. Thanks.

Answer

You can apply a tooltip on the jstree hover event. You’ll have to keep the tooltip text in the node’s data.

In the php code you can include the category column in the array

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

In the javascript code after the jsTree initialization you could set the event handler.

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

Advertisement

Answer