关闭普通标题文本以允许工具提示JQuery

Question

我正试图在我的标题图片的底部有一个图片标题。我找到了下面的代码来编写工具提示，但是它对移动不起作用。

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

我想在普通的标题文本中添加同样的标题，但是只有在移动设备上显示标题文本，因为当有鼠标时，上面的工具提示将提供标题。

我找到了这个很好的代码可以在手机上显示工具提示。，但是我无法让它完美地定位在桌面标题的底部，而且它在移动设备上并不总是正确地消失。

如何在不关闭JQuery创建的工具提示的情况下关闭常规img标题-文本？

Answer 1

这可能不是最优雅的，但它对我有效。我得到了一个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代码。(第一部分是我的第四份“申请”。)然后声明工具提示，并使用普通标题文本插入图像。最后，在创建了图像和标题文本之后，我调用第二个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>

享受吧！

感谢:费尔南多·厄本的答案用于屏幕大小检查if语句。，戴夫·托马斯的答案要删除title属性，请执行以下操作和Bootstrap 用于数据切换工具提示。。