cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Malasri
Regular Visitor

How to show tooltip on text field in the Entity List by retrieving another text field of the record In Power Portal?

I am having a case view entity list. In the case record there is a description field. In the view column Issue Summary single line of text field appears in the list. So when we hover on the Issue summary text, need to show the popup with description field value.

Malasri_1-1649141872824.png

 

On hover of this field, I need to retrieve description value and show.

1 ACCEPTED SOLUTION

Accepted Solutions
OliverRodrigues
Super User
Super User

Hi, I can think of two options of achieving this, both require JS:

 

  1. Retrieve the description via API/Fetch, and inject the value as tooltip in the summary field (it can slow down the page) - you can see API documentation for more info: Portals read operations using the Web API - Power Apps | Microsoft Docs
  2. Add the description as a new column, and hide it via JS, then use it to inject as tooltip into the summary field (better performance, but just for a millisecond, the users might see the description field in the view) - I wrote an article a while ago on how to hide a list column: Power Apps Portals – JavaScript Tip #01 – Hide & Show Elements – Oliver Rodrigues (oliverrodrigues36...

 

regardless of how you get the value, you will need JS to inject it to the summary column, I have a list with Accounts and will write a simple example retrieving the "Phone" field, and inject as tooltip into the primary contact:

OliverRodrigues_0-1649153887142.png

 

 

$(document).ready(function(){
    SetTooltip();
});

SetTooltip = function () {
 
    var list = $(".entitylist.entity-grid").eq(0);
 
    list.on("loaded", function () {
        list.find("table tbody > tr").each(function (index, tr) {
            var tooltipText = $(tr).find("td[data-attribute=telephone1]").text()
            $(tr).find("td[data-attribute=primarycontactid]").attr("title",tooltipText)
        });
    });
};



If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Pages Super User | MVP


Oliver Rodrigues


 

View solution in original post

4 REPLIES 4
OliverRodrigues
Super User
Super User

Hi, I can think of two options of achieving this, both require JS:

 

  1. Retrieve the description via API/Fetch, and inject the value as tooltip in the summary field (it can slow down the page) - you can see API documentation for more info: Portals read operations using the Web API - Power Apps | Microsoft Docs
  2. Add the description as a new column, and hide it via JS, then use it to inject as tooltip into the summary field (better performance, but just for a millisecond, the users might see the description field in the view) - I wrote an article a while ago on how to hide a list column: Power Apps Portals – JavaScript Tip #01 – Hide & Show Elements – Oliver Rodrigues (oliverrodrigues36...

 

regardless of how you get the value, you will need JS to inject it to the summary column, I have a list with Accounts and will write a simple example retrieving the "Phone" field, and inject as tooltip into the primary contact:

OliverRodrigues_0-1649153887142.png

 

 

$(document).ready(function(){
    SetTooltip();
});

SetTooltip = function () {
 
    var list = $(".entitylist.entity-grid").eq(0);
 
    list.on("loaded", function () {
        list.find("table tbody > tr").each(function (index, tr) {
            var tooltipText = $(tr).find("td[data-attribute=telephone1]").text()
            $(tr).find("td[data-attribute=primarycontactid]").attr("title",tooltipText)
        });
    });
};



If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Pages Super User | MVP


Oliver Rodrigues


 

Malasri
Regular Visitor

If we are multiple views, Hiding column and setting tooltip is working in default view. what to be done for other views.

OliverRodrigues
Super User
Super User

hi @Malasri I just did a test myself and it worked for both views. Can you share your code + snapshots? 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Pages Super User | MVP


Oliver Rodrigues


 

Malasri
Regular Visitor

Thanks!!!!! It is working fine

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

MPP IDEAS updated 768x460.png

Ideas

Discover ideas and concepts from users like you for how to use Power Pages and take your work to the next level.

Carousel News & Announcements

What's New in the Community?

Check out the latest News & Events in the community!

Top Solution Authors
Users online (4,664)