Search code examples
javascriptjqueryhtmlcsstooltip

Turn off the normal title text to allow tooltip JQuery

I'm trying to have a photo caption at the bottom of my header image. I found the following code to make that tooltip, but it doesn't work for mobile.

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

I would like to put the same caption in the normal title text, but only have that title text show up when on a mobile device, because the above tooltip will provide the caption when there's a mouse.

I found this great code that works ok to display the tooltip on mobile, but I can't get it to be positioned perfectly on the bottom of the header on the desktop, and it didn't always disappear correctly on mobile.

How do I turn off the regular img title-text without turning off the JQuery created tooltip?

Solution

  • This is likely not the most elegant, but it worked for me. I get a data-toggle tooltip, which can be formatted in CSS code with the class selector .tooltip {} and appears with mouse over on large devices, and then when on smaller devices, I can press and hold to get the normal title text.

    Solution:

    In Joomla I have two different Jumi scripts, one to create the data-toggle tooltips at the top of each module:

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

    And one to turn off the regular title text if the screen width is greater than 980 pixels.

    <script>
var mediaquery = window.matchMedia("(min-width: 980px)");
if (mediaquery.matches) {
  $('img').hover(
    function() {
      $(this).removeAttr('title');
    });
}
</script>

    Then in each module, I call that first Jumi code with <p>{jumi [*4]}</p>. (That first segment is my 4th Jumi 'Application'.) I then declare the tooltip, and insert the image with the normal title text. Finally, after the image and title text is created, I call the second Jumi code (number 7 for me) <p>{jumi [*7]}</p> to check if the screen is large, and if so, delete the tooltip.

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

    Enjoy!

    Thanks to: Fernando Urban's answer for the screen size checking if statement, Dave Thomas's answer to remove the title attribute and Bootstrap for the data-toggle tooltip.