When chatGPT Doesn't Deliver (how to add a tooltip to a link on a blogspot post)

How do you add a wikipedia style tooltip to a link in a blogger blog post?

From the oracle :

To add a Wikipedia-style tooltip to a link in a Blogger blog post, you can use a JavaScript library called "Opentip". Here are the steps to do it:

1. First, you need to add the Opentip JavaScript library to your Blogger blog. You can do this by adding the following code to the HTML of your blog template, just before the </head> tag:

   html
   <script src="https://cdnjs.cloudflare.com/ajax/libs/opentip/2.4.6/opentip-native.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/opentip/2.4.6/opentip-native.min.css">
   

2. Next, you need to add a class to the links that you want to add the tooltip to. You can do this by adding the following code to the HTML of your blog post:

   html
   <a href="#" class="tooltip" data-ot="Tooltip text">Link text</a>
   

   Replace "Tooltip text" with the text you want to appear in the tooltip, and "Link text" with the text of the link.

3. Finally, you need to add the JavaScript code that initializes the tooltips. You can do this by adding the following code to the HTML of your blog post, just before the </body> tag:

   html
   <script>
   $(function() {
       $(".tooltip").each(function() {
           new Opentip(this, $(this).data("ot"));
       });
   });
   </script>
   

   This code initializes the Opentip tooltips on all links with the "tooltip" class.

Once you have added these three steps, save your blog post and preview it. When you hover over the links with the "tooltip" class, the tooltip text should appear.

And? Long story short, doesn't work..

Blogger fights you, FYI, it tells you you can't have a <link ... > without a </link> which is not true.. But..

So, what does work?

In blogger, go to Theme and then, where you had </head> Make it look like :

<script crossorigin='anonymous' integrity='sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=' src='https://code.jquery.com/jquery-3.6.3.min.js'/>

<script src='https://cdnjs.cloudflare.com/ajax/libs/opentip/2.4.6/downloads/opentip-native.min.js'/>

<link href='https://cdnjs.cloudflare.com/ajax/libs/opentip/2.4.6/css/opentip.min.css' rel='stylesheet'/>

  </head>

Yes, this is where blogger says to add a </link> before it'll let you save.. Do that. It fixes itself later 😊

Then, though chatGPT doesn't say it, go to the </body> in the same editor and add the

<script>

$(function() {

    $(&quot;.tooltip&quot;).each(function() {

        new Opentip(this, $(this).data(&quot;ot&quot;));

    });

});

</script>

asdf just before the </body>.

For the link you want to add the tooltip to, what it chatGPT gives you is sufficient.

And? You're in business. It's not as good looking a tooltip as Wikipedia's but, that's why they're wikipedia and you're you😊