Is it possible to put tooltips on django list view that could appear onClick or mouse hover

I'm pretty sure that could be possible by customising the django admin site for that specific feature. I'm trying to add this functionality using admin.py but no better luck since a week.

In the picture you can see I put a circle where I will like to add and icon that will show a tooltip saying information about that specific field or column. List View Image

So is there any way to do it easily without customising it from templates. Because the List view is so much complex and we do not want to complicate the things doing it hard way.

I tried to find it online and in the django official docs but every time its about customising it from templates, also I can html from admin.py but it doesn't invokes the tooltip as I wanted.

Solution

The short answer is: No, django can not give you a popover inside of your ListView. Django takes care about the backend. Its purpose is to serve the content of the tooltip from database to your html template. The displaying part is the job of the frontend. Therefore you have to design your tooltip yourself using html, css and javascript.

A useful framework is bootstrap as it takes care about the javascript and css. I will give you an example.

models.py

class MyModel(models.Model):
    info_field = models.CharField(max_length=50)

views.py

def my_list_view(request):
    my_objects = MyModel.objects.all()
    return render(request, 'my_app/list-view.html', context={'my_objects': my_objects})

list-view.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>


{% for object in my_objects %}
<a tabindex="0" class="btn" role="button" data-bs-toggle="popover"
        data-bs-trigger="focus" data-bs-content="{{ object.info_field }}"  data-bs-html="true">
</a>
{% endfor %}


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
          crossorigin="anonymous"></script>
  <script>
    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
    const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
  </script>
</body>