如何使鼠标单击对工具提示正文中的内容起作用

Question

这是我的工具提示代码

//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;

?>

此代码在悬停时触发工具提示。问题是当用户移动鼠标时，工具提示文本消失，因此用户无法到达工具提示正文。

我想让鼠标点击对工具提示正文中的内容起作用，因为工具提示正文包含 html 链接，用户应该可以点击这些链接。

如何修改上面的代码或使用任何其他方法来实现它？

Answer 1

尝试将 delay 选项更改为对象 delay: { "show": 300, "hide": 3000 } 以获得更多的隐藏延迟时间。

或者像这样使用manual触发器

// 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');
});

有关详细信息，请参阅 bootstrap 文档： https://getbootstrap.com/docs/5.1/components/tooltips/#options

如何使鼠标单击对工具提示正文中的内容起作用

How to make mouse click work on content inside tooltip body

html

javascript

php

ajax

tooltip