我想在标题图片的底部添加照片说明。我找到了以下代码来制作该工具提示，但它不适用于移动设备。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({placement:"bottom",delay:{show:0, hide:100000000}});
});
</script>
</body>
</html>
我想在普通标题文本中添加相同的标题，但只有在移动设备上才会显示该标题文本，因为上面的工具提示会在有鼠标时提供标题。
我找到了 this great code that works ok to display the tooltip on mobile ，但我无法将它完美地放置在桌面页眉的底部，而且它在移动设备上并不总是正确消失。
如何在不关闭 JQuery 创建的工具提示的情况下关闭常规 img 标题文本？
最佳答案
这可能不是最优雅的，但它对我有用。我得到一个data-toggle工具提示，可以使用类选择器在 CSS 代码中格式化 .tooltip {}在大型设备上鼠标悬停时出现，然后在较小的设备上，我可以按住以获取正常的标题文本。
解决方案:
在 Joomla 中，我有两个不同的 Jumi 脚本，一个用于在每个模块的顶部创建数据切换工具提示:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({placement:"bottom",delay:{show:0, hide:0}});
});
</script>
</body>
</html>
如果屏幕宽度大于 980 像素，则关闭常规标题文本。
<script>
var mediaquery = window.matchMedia("(min-width: 980px)");
if (mediaquery.matches) {
$('img').hover(
function() {
$(this).removeAttr('title');
});
}
</script>
然后在每个模块中，我用 <p>{jumi [*4]}</p> 调用第一个 Jumi 代码. (第一部分是我的第 4 个 Jumi“应用程序”。)然后我声明工具提示，并插入带有正常标题文本的图像。最后，在创建图像和标题文本后，我调用第二个 Jumi 代码(我的编号为 7)<p>{jumi [*7]}</p>检查屏幕是否很大，如果是，则删除工具提示。
<p>{jumi [*4]}</p>
<p title="This is where the text of the the data-toggle tooltip goes" href="#" data-toggle="tooltip">
<img title="This text appears as the regular title text on smaller screens" src="Location_of_the/image_I_display.jpg" alt="Image key words" />
</p>
<p>{jumi [*7]}</p>
尽情享受吧!
感谢:Fernando Urban 的回答 for the screen size checking if statement , Dave Thomas 的回答 to remove the title attribute和 Bootstrap for the data-toggle tooltip .
关于javascript - 关闭普通标题文本以允许工具提示 JQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44210631/