diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/public/js/role-listing.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/public/js/role-listing.js
index 516aacb7b5..c1acb8e9f2 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/public/js/role-listing.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.roles/public/js/role-listing.js
@@ -140,7 +140,7 @@ function loadRoles() {
             }
         },
         {
-            class: "text-right content-fill text-left-on-grid-view no-wrap",
+            class: "text-right content-fill text-left-on-grid-view no-wrap tooltip-overflow-fix",
             data: null,
             render: function (data, type, row, meta) {
                 var isCloud = false;
@@ -153,7 +153,9 @@ function loadRoles() {
                 var editLink = '<a onclick="javascript:loadRoleBasedActionURL(\'edit\', \'' + data.name + '\')" ' +
                     'data-role="' + data.name + '" ' +
                     'data-click-event="edit-form" ' +
-                    'class="btn padding-reduce-on-grid-view edit-role-link">' +
+                    'data-toggle="tooltip" ' +
+                    'data-original-title="Edit Role"' +
+                    'class="btn padding-reduce-on-grid-view edit-role-link"> ' +
                     '<span class="fw-stack">' +
                     '<i class="fw fw-circle-outline fw-stack-2x"></i>' +
                     '<i class="fw fw-bookmark fw-stack-1x"></i>' +
@@ -167,7 +169,9 @@ function loadRoles() {
 
                 var editPermissionLink = '<a onclick="javascript:loadRoleBasedActionURL(\'edit-permission\', \'' + data.name + '\')" ' +
                     'data-role="' + data.name + '" ' +
-                    'data-click-event="edit-form" ' +
+                    'data-click-event="edit-form " ' +
+                    'data-toggle="tooltip" ' +
+                    'data-original-title="Edit Permission"' +
                     'class="btn padding-reduce-on-grid-view edit-permission-link">' +
                     '<span class="fw-stack">' +
                     '<i class="fw fw-circle-outline fw-stack-2x"></i>' +
@@ -182,6 +186,8 @@ function loadRoles() {
 
                 var removeLink = '<a data-role="' + data.name + '" ' +
                     'data-click-event="remove-form" ' +
+                    'data-toggle="tooltip" ' +
+                    'data-original-title="Remove"' +
                     'class="btn padding-reduce-on-grid-view remove-role-link">' +
                     '<span class="fw-stack">' +
                     '<i class="fw fw-circle-outline fw-stack-2x"></i>' +
@@ -272,4 +278,7 @@ $("#role-grid").on("click", ".remove-role-link", function () {
 
 $(document).ready(function () {
     loadRoles();
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    });
 });