关闭正常的标题文本以允许工具提示 JQuery答案

【问题标题】：Turn off the normal title text to allow tooltip JQuery关闭正常的标题文本以允许工具提示 JQuery
【发布时间】：2017-05-26 21:57:23
【问题描述】：

我正在尝试在标题图片的底部添加照片说明。我找到了以下代码来制作该工具提示，但它不适用于移动设备。

<!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 标题文本？

【问题讨论】：

它适用于移动设备，但您必须用手指长时间按住元素，而不仅仅是点击。您还可以在触摸事件时将工具提示附加到正文。但首先设计工具提示，然后从 touchevent.clientX 和 clienY 获取位置并将其设置为附加的工具提示
感谢您的建议。当您长时间按住图像时，会出现正常的标题文本，但 data-toggle tooltip 不会。如果我没有为 img 分配标题信息，文件名会在长时间保留后出现。我会考虑你的其他建议。再次感谢。

标签： javascript jquery html css tooltip

【解决方案1】：

这可能不是最优雅的，但它对我有用。我得到一个data-toggle 工具提示，它可以使用类选择器.tooltip {} 以CSS 代码格式化，并在大型设备上出现鼠标悬停，然后在较小的设备上，我可以按住以获得正常的标题文本。

解决方案：

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

然后在每个模块中，我将第一个 Jumi 代码称为 <p>{jumi [*4]}</p>。（第一段是我的第四个 Jumi 'Application'。）然后我声明工具提示，并插入带有正常标题文本的图像。最后，图片和标题文字创建完成后，我调用第二个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。

【讨论】：

似乎有<head> 和<body> 和</html>（以及其他一些部分）是不必要的，并导致一些小错误。我已经把它们拿出来了，(powermapper.com) 说它更好。