Feat/tooltips

doc/introduction.rst

@@ -349,6 +349,13 @@ To add arbitrary hyperlinks to the menu::
 
   admin.add_link(MenuLink(name='Home Page', url='/', category='Links'))
 
+  # With icon and tooltip
+  admin.add_link(MenuLink(name='Home Page', url='/',
+      category='Links',
+      menu_icon_type='fa',
+      menu_icon_value='fa-home',
+      tooltip='Go to Home Page'))
+
 And to add a menu divider to separate menu items in the menu::
 
   admin.add_menu_item(MenuDivider(), target_category='Links')

examples/bootstrap4/main.py

@@ -101,6 +101,11 @@ class UserAdmin(ModelView):
     page_size_options = (3, 5, 7, 10, 20, 50, 100)
     page_size = 7
 
+    column_descriptions = {
+        "active": "Is active? if not active user "
+        'can <strong class="text-danger">NOT</strong> login.',
+    }
+
 
 class SimplePageView(ModelView):
     can_view_details = True
@@ -135,6 +140,7 @@ class PageWithModalView(ModelView):
             menu_icon_type="fa",
             menu_icon_value="fa-users",
             menu_class_name="text-warning",
+            tooltip="This is User ModelView",
         )
     )
     admin.add_menu_item(MenuDivider(), target_category="Menu")
@@ -150,11 +156,12 @@ class PageWithModalView(ModelView):
         ModelView(
             Page,
             db,
-            name="Page-with-icon",
+            name="Page",
             endpoint="page2",
             menu_class_name="text-danger",
             menu_icon_type="fa",
             menu_icon_value="fa-file",
+            tooltip="This is Page ModelView",
         )
     )
 
@@ -166,16 +173,15 @@ class PageWithModalView(ModelView):
     admin.add_link(
         MenuLink(
             name="link1",
-            url="http://www.example.com/",
-            class_name="text-warning bg-danger",
+            url="/",
+            class_name="text-danger bg-warning",
             icon_type="fa",
             icon_value="fa-external-link",
+            tooltip="This is link1",
         )
     )
-    admin.add_link(
-        MenuLink(name="link2", url="http://www.example.com/", class_name="text-danger")
-    )
-    admin.add_link(MenuLink(name="Link3", url="http://www.example.com/"))
+    admin.add_link(MenuLink(name="link2", url="/", class_name="text-danger"))
+    admin.add_link(MenuLink(name="Link3", url="/"))
 
     admin.add_sub_category(name="Links", parent_name="Menu")
     admin.add_link(

flask_admin/base.py

@@ -147,12 +147,15 @@ class MyView(BaseView):
             def index(self):
                 return 'Hello World!'
 
-    Icons can be added to the menu by using `menu_icon_type` and `menu_icon_value`. For
-    example::
+    Icons can be added to the menu by using `menu_icon_type` and `menu_icon_value`.
+    Tooltip also can be injected in the menu item using `tooltip`. For example::
 
         admin.add_view(
             MyView(
-                name='My View', menu_icon_type='glyph', menu_icon_value='glyphicon-home'
+                name='My View',
+                menu_icon_type='glyph',
+                menu_icon_value='glyphicon-home',
+                tooltip='This is my view'
             )
         )
     """
@@ -205,6 +208,7 @@ def __init__(
         menu_class_name: str | None = None,
         menu_icon_type: str | None = None,
         menu_icon_value: str | None = None,
+        tooltip: str | None = None,
     ) -> None:
         """
         Constructor.
@@ -239,6 +243,8 @@ def __init__(
              - `flask_admin.consts.ICON_TYPE_IMAGE_URL` - Image with full URL
         :param menu_icon_value:
             Icon glyph name or URL, depending on `menu_icon_type` setting
+        :param tooltip:
+            Optional tooltip for the menu item.
         """
         self.name = name
         self.category = category
@@ -251,6 +257,7 @@ def __init__(
         self.menu_class_name = menu_class_name
         self.menu_icon_type = menu_icon_type
         self.menu_icon_value = menu_icon_value
+        self.tooltip = tooltip
 
         # Initialized from create_blueprint
         self.admin: Admin | None = None
@@ -514,6 +521,7 @@ def __init__(
         menu_class_name: str | None = None,
         menu_icon_type: str | None = None,
         menu_icon_value: str | None = None,
+        tooltip: str | None = None,
     ) -> None:
         super().__init__(
             name or babel.lazy_gettext("Home"),
@@ -524,6 +532,7 @@ def __init__(
             menu_class_name=menu_class_name,
             menu_icon_type=menu_icon_type,
             menu_icon_value=menu_icon_value,
+            tooltip=tooltip,
         )
         self._template = template
 

flask_admin/contrib/fileadmin/__init__.py

@@ -357,6 +357,7 @@ def __init__(
         menu_class_name: str | None = None,
         menu_icon_type: str | None = None,
         menu_icon_value: str | None = None,
+        tooltip: str | None = None,
         storage: BaseFileStorage | None = None,
     ) -> None:
         """
@@ -375,6 +376,8 @@ def __init__(
         :param verify_path:
             Verify if path exists. If set to `True` and path does not exist
             will raise an exception.
+        :param tooltip:
+            Optional tooltip for the menu item.
         :param storage:
             The storage backend that the `BaseFileAdmin` will use to operate on the
             files.
@@ -402,6 +405,7 @@ def __init__(
             menu_class_name=menu_class_name,
             menu_icon_type=menu_icon_type,
             menu_icon_value=menu_icon_value,
+            tooltip=tooltip,
         )
 
     def is_accessible_path(self, path: str) -> bool:

flask_admin/contrib/mongoengine/view.py

@@ -254,6 +254,7 @@ def __init__(
         menu_class_name=None,
         menu_icon_type=None,
         menu_icon_value=None,
+        tooltip=None,
     ):
         """
         Constructor
@@ -281,6 +282,8 @@ def __init__(
 
         :param menu_icon_value:
             Icon glyph name or URL, depending on `menu_icon_type` setting
+        :param tooltip:
+            Tooltip for the menu item
         """
         self._search_fields = []
 
@@ -294,6 +297,7 @@ def __init__(
             menu_class_name=menu_class_name,
             menu_icon_type=menu_icon_type,
             menu_icon_value=menu_icon_value,
+            tooltip=tooltip,
         )
 
         self._primary_key = self.scaffold_pk()

flask_admin/contrib/peewee/view.py

@@ -203,6 +203,7 @@ def __init__(
         menu_class_name: str | None = None,
         menu_icon_type: str | None = None,
         menu_icon_value: str | None = None,
+        tooltip: str | None = None,
     ) -> None:
         self._search_fields: list[t.Any] = []
         super().__init__(
@@ -215,6 +216,7 @@ def __init__(
             menu_class_name=menu_class_name,
             menu_icon_type=menu_icon_type,
             menu_icon_value=menu_icon_value,
+            tooltip=tooltip,
         )
         self._primary_key = self.scaffold_pk()
 

flask_admin/contrib/pymongo/view.py

@@ -78,6 +78,7 @@ def __init__(
         menu_class_name=None,
         menu_icon_type=None,
         menu_icon_value=None,
+        tooltip=None,
     ):
         """
         Constructor
@@ -104,6 +105,8 @@ def __init__(
              - `flask_admin.consts.ICON_TYPE_IMAGE_URL` - Image with full URL
         :param menu_icon_value:
             Icon glyph name or URL, depending on `menu_icon_type` setting
+        :param tooltip:
+            Tooltip for the menu item
         """
         self._search_fields = []
 
@@ -122,6 +125,7 @@ def __init__(
             menu_class_name=menu_class_name,
             menu_icon_type=menu_icon_type,
             menu_icon_value=menu_icon_value,
+            tooltip=tooltip,
         )
 
         self.coll = coll

flask_admin/contrib/sqla/view.py

@@ -351,6 +351,7 @@ def __init__(
         menu_class_name: str | None = None,
         menu_icon_type: str | None = None,
         menu_icon_value: str | None = None,
+        tooltip: str | None = None,
     ) -> None:
         """
         Constructor.
@@ -382,6 +383,8 @@ def __init__(
              - `flask_admin.consts.ICON_TYPE_IMAGE_URL` - Image with full URL
         :param menu_icon_value:
             Icon glyph name or URL, depending on `menu_icon_type` setting
+        :param tooltip:
+            Tooltip for the menu item
         """
         self.session = _warn_session_deprecation(session)
 
@@ -406,6 +409,7 @@ def __init__(
             menu_class_name=menu_class_name,
             menu_icon_type=menu_icon_type,
             menu_icon_value=menu_icon_value,
+            tooltip=tooltip,
         )
         self._manager = manager_of_class(self.model)
 

flask_admin/menu.py

@@ -18,11 +18,13 @@ def __init__(
         icon_type: str | None = None,
         icon_value: str | None = None,
         target: str | None = None,
+        tooltip: str | None = None,
     ) -> None:
         self.name = name
         self.class_name: str = class_name if class_name is not None else ""
         self.icon_type = icon_type
         self.icon_value = icon_value
+        self.tooltip = tooltip
         self.target = target
 
         self.parent: BaseMenu | None = None
@@ -107,6 +109,7 @@ def __init__(
             class_name=view.menu_class_name,
             icon_type=view.menu_icon_type,
             icon_value=view.menu_icon_value,
+            tooltip=view.tooltip,
         )
 
         self._view = view
@@ -165,13 +168,15 @@ def __init__(
         icon_type: str | None = None,
         icon_value: str | None = None,
         target: str | None = None,
+        tooltip: str | None = None,
     ) -> None:
         super().__init__(name, class_name, icon_type, icon_value, target)
 
         self.category = category
 
         self.url = url
         self.endpoint = endpoint
+        self.tooltip = tooltip
 
     def get_url(self) -> str:
         return self.url or url_for(self.endpoint)  # type: ignore[arg-type]

flask_admin/model/base.py

@@ -912,6 +912,7 @@ def __init__(
         menu_class_name: str | None = None,
         menu_icon_type: str | None = None,
         menu_icon_value: str | None = None,
+        tooltip: str | None = None,
     ) -> None:
         """
         Constructor.
@@ -938,6 +939,8 @@ def __init__(
              - `flask_admin.consts.ICON_TYPE_IMAGE_URL` - Image with full URL
         :param menu_icon_value:
             Icon glyph name or URL, depending on `menu_icon_type` setting
+        :param tooltip:
+            Tooltip for the menu item
         """
         self.model = model
         # If name not provided, it is model name
@@ -953,6 +956,7 @@ def __init__(
             menu_class_name=menu_class_name,
             menu_icon_type=menu_icon_type,
             menu_icon_value=menu_icon_value,
+            tooltip=tooltip,
         )
 
         # Actions

flask_admin/templates/bootstrap4/admin/base.html

@@ -90,6 +90,14 @@ <h4 class="mb-4">
             type="text/javascript"></script>
     <script {{ admin_csp_nonce_attribute }} src="{{ admin_static.url(filename='vendor/multi-level-dropdowns-bootstrap/bootstrap4-dropdown-ml-hack.js') }}" type="text/javascript"></script>
     <script {{ admin_csp_nonce_attribute }} src="{{ admin_static.url(filename='admin/js/helpers.js', v='1.0.0') }}" type="text/javascript"></script>
+
+    <script  {{ admin_csp_nonce_attribute }} type="text/javascript">
+      // Enable tooltips everywhere
+      $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+      })
+    </script>
+
     {% if admin_view.extra_js %}
         {% for js_url in admin_view.extra_js %}
             <script {{ admin_csp_nonce_attribute }} src="{{ js_url }}" type="text/javascript"></script>

flask_admin/templates/bootstrap4/admin/layout.html

@@ -50,15 +50,13 @@
                   <li class="{{ class_name }}"></li>
                 {% else %}
                   <li>
-                    {%- if child.is_active(admin_view) %}
-                      <a class="dropdown-item active {{ class_name }} " href="{{ child.get_url() }}"{% if child.target %}
-                      target="{{ child.target }}"{% endif %}>
-                        {{ menu_icon(child) }}{{ child.name }}</a>
-                    {% else %}
-                      <a class="dropdown-item {{ class_name }}" href="{{ child.get_url() }}"{% if child.target %}
-                      target="{{ child.target }}"{% endif %}>
-                        {{ menu_icon(child) }}{{ child.name }}</a>
-                    {%- endif %}
+                      <a class="dropdown-item {{ 'active' if child.is_active(admin_view) else '' }} {{ class_name }} "
+                        href="{{ child.get_url() }}"
+                        {% if child.target %} target="{{ child.target }}"{% endif %}
+                        data-toggle="tooltip" data-placement="bottom" title="{{ child.tooltip or '' }}"
+                      >
+                        {{ menu_icon(child) }}{{ child.name }}
+                      </a>
                   </li>
                 {%- endif %}
               {%- endif %}
@@ -74,8 +72,12 @@
             {%- else %}
           <li>
         {%- endif %}
-      <a class="nav-link {{ class_name }}" href="{{ item.get_url() }}"{% if item.target %} target="{{ item.target }}"{% endif %}>
-        {{ menu_icon(item) }}{{ item.name }}</a>
+      <a class="nav-link {{ class_name }}" href="{{ item.get_url() }}"
+        {% if item.target %} target="{{ item.target }}"{% endif %}
+        data-toggle="tooltip" data-placement="bottom" title="{{ item.tooltip or '' }}"
+      >
+        {{ menu_icon(item) }}{{ item.name }}
+      </a>
       </li>
       {%- endif -%}
     {% endif -%}
@@ -88,8 +90,12 @@
     {% set class_name = item.get_class_name() %}
     {% if item.is_accessible() and item.is_visible() %}
       <li>
-        <a class="nav-link {{ class_name }}" href="{{ item.get_url() }}"{% if item.target %} target="{{ item.target }}"{% endif %}>
-          {{ menu_icon(item) }}{{ item.name }}</a>
+        <a class="nav-link {{ class_name }}" href="{{ item.get_url() }}"
+          {% if item.target %} target="{{ item.target }}"{% endif %}
+          data-toggle="tooltip" data-placement="bottom" title="{{ item.tooltip or '' }}"
+        >
+          {{ menu_icon(item) }}{{ item.name }}
+        </a>
       </li>
     {% endif %}
   {% endfor %}

flask_admin/templates/bootstrap4/admin/model/list.html

@@ -104,6 +104,7 @@
                             <a class="fa fa-question-circle glyphicon glyphicon-question-sign"
                                title="{{ admin_view.column_descriptions[c] }}"
                                href="javascript:void(0)" data-role="tooltip"
+                               data-toggle="tooltip" data-placement="bottom" data-html="true"
                             ></a>
                         {% endif %}
                     </th>