CODEWITHSUNDEEP
javascriptphphtmlajaxtooltip
user_59910105
user_59910105

Reputation: 119

How to make mouse click work on content inside tooltip body

This is my tooltip code

//html

<span data-id="1" class="info">Text</span>

//script

$(document).ready(function(){

  // Add tooltip
  $('.info').tooltip({
   delay: 3,
   placement: "bottom",
   title: Details,
   html: true
  }); 
});

// Get user details for tooltip
function Details(){
  var tipid = $(this).data('id');

  var tooltipText = '';
  $.ajax({
   url: 'ajaxfile.php',
   type: 'post',
   async: false,
   data: {tipid:tipid},
   success: function(response){
     tooltipText = response;
     $('.tooltip-content').html(response); 
   }
  });
  return tooltipText;
}

//ajaxfile.php

<?php
include "db.php";

$tipid= $_POST['tipid'];

global $ConnectingDB;
$sql  = "SELECT * FROM tooltip_content WHERE id = '$tipid'";  
$stmt =$ConnectingDB->query($sql);

while ($DataRows = $stmt->fetch()) {
    $Description = $DataRows["description"];
    $response = "<div class='tooltip-body'>".$Description."</div>";

}

echo $response;
exit;

?>

This code triggers the tooltip on hover. The problem is that when a user moves the mouse, the tooltip text disappears, so the user can't reach the tooltip body.

I want to make mouse click work on content inside tooltip body because the tooltip body text contains the html links, which user should be able to click.

How can I modify above code or use any other method to make this work?

Upvotes: 0

Views: 523

Answers (1)

While1
While1

Reputation: 724

Try to change the delay option to object delay: { "show": 300, "hide": 3000 } to get more delay time on hidden.

or use manual trigger like this

// Add tooltip
$('.info').tooltip({
    delay: 3,
    placement: "bottom",
    title: Details,
    html: true,
    trigger: 'manual' // <-- manual trigger
    }); 
});

// Show trigger
$('.info').on('mouseenter focus',function(){
    $(this).tooltip('show');
});

// Hide trigger
$('.info').parent().on('click', function(){
    $('.info').tooltip('hide');
});

for more information go to the bootstrap documentation: https://getbootstrap.com/docs/5.1/components/tooltips/#options

Upvotes: 1

Related Questions