per https://docs.telerik.com/kendo-ui/contr ... ui-tooltip
here's the way the built-in implementation looks:
I don't like that. I need to select the field to put into the tip - Aware only lets me pick ALL or Hidden. In this example, I also tried Hidden and made a calculated column of the "body" attribute, but I can't get anything to work using "Show Hidden Fields"
Has anyone implemented any .JS to produce nice "on hover" tool tips/field expansion.
thx
jaymer...
Anyone know how to do Field ToolTip NOT using Aware
Anyone know how to do Field ToolTip NOT using Aware
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.
Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Aware Programming & Consulting - Tampa FL
Re: Anyone know how to do Field ToolTip NOT using Aware
I have integrated bootstrap tooltips (tooltips and popovers, see screenshot for an popover example):
I can´t lift out just that part from my app but with this example you can probably figure it out with minimal "coding":
https://codepen.io/monkeyraptor/pen/fAmti
I can´t lift out just that part from my app but with this example you can probably figure it out with minimal "coding":
https://codepen.io/monkeyraptor/pen/fAmti
Henrik (V8 Developer Ed. - Windows)
Re: Anyone know how to do Field ToolTip NOT using Aware
Thanks Henrik
I remember seeing that in your gallery.
But what I need is a rollover expansion for a long field.
Like if I made a several hundred character note on a customer, but I’m seeing only the first 80 characters in a grid. I’d like to hover over that part of the note that I can see and have a window come up that shows all of the note. To save me having to do a click and open the window. A lot faster for the user.
I remember seeing that in your gallery.
But what I need is a rollover expansion for a long field.
Like if I made a several hundred character note on a customer, but I’m seeing only the first 80 characters in a grid. I’d like to hover over that part of the note that I can see and have a window come up that shows all of the note. To save me having to do a click and open the window. A lot faster for the user.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.
Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Aware Programming & Consulting - Tampa FL
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Anyone know how to do Field ToolTip NOT using Aware
The Kendo example does what you want, yes? If so, you've got it all right there.Jaymer wrote:per https://docs.telerik.com/kendo-ui/contr ... ui-tooltip
VocalDay Solutions - Agility - Predictability - Quality
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Anyone know how to do Field ToolTip NOT using Aware
Render Script
Code: Select all
$("#" + parser.m_gridId).kendoTooltip({
filter: "td:nth-child(2)", //this filter selects the second column's cells
position: "top",
width: 360,
height: 100,
content: function(e){
var dataItem = $("#" + parser.m_gridId).data("kendoGrid").dataItem(e.target.closest("tr"));
var content = dataItem.Note;
return content;
}
}).data("kendoTooltip");
VocalDay Solutions - Agility - Predictability - Quality
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Re: Anyone know how to do Field ToolTip NOT using Aware
Yeah, the bootstrap popover for example can be used for that. In my example, the questionmark icon is a font awesome icon and the help popover is shown when hoovering the mouse over the icon i.e you can populate a HTML BO attribute with the HTML for the popover and then in the render script initialize the actual popover. I chose to integrate these popovers etc. as I use these types of help popovers all over the place so in forms, query headers, content panels etc. etc. and works great.Jaymer wrote:Thanks Henrik
I remember seeing that in your gallery.
But what I need is a rollover expansion for a long field.
Like if I made a several hundred character note on a customer, but I’m seeing only the first 80 characters in a grid. I’d like to hover over that part of the note that I can see and have a window come up that shows all of the note. To save me having to do a click and open the window. A lot faster for the user.
John's example looks nice as well though and looks like it might be a quicker / more "native" fix.
Henrik (V8 Developer Ed. - Windows)
Re: Anyone know how to do Field ToolTip NOT using Aware
Henrik, I like your example also. Thats a nice standard to have those all throughout an app for user info.hpl123 wrote: i.e you can populate a HTML BO attribute with the HTML for the popover and then in the render script initialize the actual popover.
Q: So lets say you have 30-50 of these HELP icons throughout your system, so you need 50 fields/tuples accessible with this HTML.
Exactly how do you may any given one (or more) of these be in context when needed?
If I was on a Customer Grid, then clicked [New Customer] (create object built-in operation), How am I going to have 3, for example, help tips to show up on the Customer Entry Form? What BO would be in context to allow the render script to populate your tip variable, besides LIRU & SS?
If I added 50 fields to SystemSettings, that would make this easy - but seems too simple, straightforward, non-flexible for multi-tenant, etc.
So you must have some cool innovative way to accomplish this. Can you share?
... or maybe you can't use a built-in create anytime you need this, and you have to use a process to ENTER NEW all the time?
jaymer...
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.
Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Aware Programming & Consulting - Tampa FL
SUCCESS
thanks JT
True, the kendo code was there, but it took that other 5% of the JT Voodoo to get it Aware-ready.
Couple of points...
1) Here's your modified code:
2) So its cool that I can add in HTML - so I made it bold, bigger, etc. I even use a <<BO.field>> that would be in context. Thats works too.
3) But human nature is always wanting more, right? In my case, the "PRIVATE NOTE" indicator is shown by the red icon preceeding a row. Sure, that should be enough for a user, but it would be nice if I could show that line in red ONLY when applicable. Problem is, that involves data from column 1. Wouldn't I need another filter? And another dataitem? Seems like I'd need a function within this function to see if its Private.
4) I wrote the CONTENT assignments in a simple way, so its easy to see that I'd eliminate the middle assignment if its NOT private... if I could only determine that. Any ideas JT?
I could see lots of uses for this... once we can crack the code and make this easy for many to implement.
Since parent variables are available via context, a nice popup could be implemented in cases where parent info is overwritten. Bruce may have lots of need for this. I had forgotten about this for 2 years - because when I first needed it, the options were too limiting.
True, the kendo code was there, but it took that other 5% of the JT Voodoo to get it Aware-ready.
Couple of points...
1) Here's your modified code:
Code: Select all
$("#" + parser.m_gridId).kendoTooltip({
filter: "td:nth-child(2)", //this filter selects the second column's cells
position: "right",
width: 660,
height: 100,
content: function(e){
var dataItem = $("#" + parser.m_gridId).data("kendoGrid").dataItem(e.target.closest("tr"));
var content = 'data from parent context: <<Lead.FullName>>';
content = content + '<span style="color:red"><h5><b>PRIVATE NOTE</b><h6></span>' +
content = content + '<span style="color:black"><h6><b>Expanded Notes --> ' + dataItem.body + '</b></h6></span>' ;
return content;
}
}).data("kendoTooltip");
3) But human nature is always wanting more, right? In my case, the "PRIVATE NOTE" indicator is shown by the red icon preceeding a row. Sure, that should be enough for a user, but it would be nice if I could show that line in red ONLY when applicable. Problem is, that involves data from column 1. Wouldn't I need another filter? And another dataitem? Seems like I'd need a function within this function to see if its Private.
4) I wrote the CONTENT assignments in a simple way, so its easy to see that I'd eliminate the middle assignment if its NOT private... if I could only determine that. Any ideas JT?
I could see lots of uses for this... once we can crack the code and make this easy for many to implement.
Since parent variables are available via context, a nice popup could be implemented in cases where parent info is overwritten. Bruce may have lots of need for this. I had forgotten about this for 2 years - because when I first needed it, the options were too limiting.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.
Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Aware Programming & Consulting - Tampa FL
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Anyone know how to do Field ToolTip NOT using Aware
How about ...?Jaymer wrote: Q: So lets say you have 30-50 of these HELP icons throughout your system, so you need 50 fields/tuples accessible with this HTML.
1. Create a ToolTips BO that has a peer relationship with the domain BOs (Customer, etc) that need ToolTips.
2. Create Shortcuts to the ToolTips that apply to the BO
VocalDay Solutions - Agility - Predictability - Quality
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Anyone know how to do Field ToolTip NOT using Aware
Code: Select all
var dataItem
To add some clarity for your scenario, Iet's change the variable name from dataItem to selectedNote.
Code: Select all
$("#" + parser.m_gridId).kendoTooltip({
filter: "td:nth-child(2)", //this filter selects the second column's cells
position: "right",
width: 660,
height: 100,
content: function(e){
var selectedNote = $("#" + parser.m_gridId).data("kendoGrid").dataItem(e.target.closest("tr"));
var content = 'data from parent context: <<Lead.FullName>>';
if (selectedNote.private === "Yes") {
content = content + '<span style="color:red"><h5><b>PRIVATE NOTE</b><h6></span>'
}
content = content + '<span style="color:black"><h6><b>Expanded Notes --> ' + selectedNote.body + '</b></h6></span>' ;
return content;
}
}).data("kendoTooltip");
VocalDay Solutions - Agility - Predictability - Quality
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Re: Anyone know how to do Field ToolTip NOT using Aware
JT, yes, renaming that field makes a lot of difference.
now, this isn't your fault or a problem in your code, but...
1) since i'm using an icon in the 1st column, the value of the Private field is neither Yes or No. In fact, when output in the .js, its nothing. Its NULL. Its not UNDEFINED. It just doesn't exist.
If, in the grid widget definition, I change that column to "Icon & value", then it still doesn't work. Only if its "value only" (where it displays Yes or No) will the condition work.
2) Due to a bug (or limitation), making a Calculated Column (CC) in a Widget Grid does not work. Making a CC in a regular Query works, but in my case, I thought I'd leave the 1st column as is (the icon), and make another column Yes/No (which, really wouldn't have worked because I don't want this to appear - and if you uncheck it, then it removes the CC). SO, when making the CC, the new field is = to "Lead.om_Notes.Private" - THIS DOES NOT WORK. Syntax is fine, but at runtime, it does not resolve to the instance shown on that row. In my case, ALL ROW VALUES were the same from another unrelated record in the Notes BO.
Now, you can't tell this from the Yes/No column, so I set a CC = theNote, and what displayed was NONE of the 4 notes in the grid. A totally diff record.
I imagine somewhere it might read "A calculated column can only be derived from the main BO or a direct shortcut".
So, the task now, should you choose to waste your time on this (or just let Aware beat you on this one), is how to reference a field value when it is set to Icon Only in the grid. (I'm sure many future readers will be disappointed.)
I'd be happy even knowing the Icon name. Cause I'm using that column to display a blank, or 1 of 2 icons depending on criteria in the icon rule.
thx
jaymer...
Not working. Calc column not set correctly cause 1st column does not evaluate to Yes or No Working, since 1st column is normal field.
now, this isn't your fault or a problem in your code, but...
1) since i'm using an icon in the 1st column, the value of the Private field is neither Yes or No. In fact, when output in the .js, its nothing. Its NULL. Its not UNDEFINED. It just doesn't exist.
If, in the grid widget definition, I change that column to "Icon & value", then it still doesn't work. Only if its "value only" (where it displays Yes or No) will the condition work.
2) Due to a bug (or limitation), making a Calculated Column (CC) in a Widget Grid does not work. Making a CC in a regular Query works, but in my case, I thought I'd leave the 1st column as is (the icon), and make another column Yes/No (which, really wouldn't have worked because I don't want this to appear - and if you uncheck it, then it removes the CC). SO, when making the CC, the new field is = to "Lead.om_Notes.Private" - THIS DOES NOT WORK. Syntax is fine, but at runtime, it does not resolve to the instance shown on that row. In my case, ALL ROW VALUES were the same from another unrelated record in the Notes BO.
Now, you can't tell this from the Yes/No column, so I set a CC = theNote, and what displayed was NONE of the 4 notes in the grid. A totally diff record.
I imagine somewhere it might read "A calculated column can only be derived from the main BO or a direct shortcut".
So, the task now, should you choose to waste your time on this (or just let Aware beat you on this one), is how to reference a field value when it is set to Icon Only in the grid. (I'm sure many future readers will be disappointed.)
I'd be happy even knowing the Icon name. Cause I'm using that column to display a blank, or 1 of 2 icons depending on criteria in the icon rule.
thx
jaymer...
Not working. Calc column not set correctly cause 1st column does not evaluate to Yes or No Working, since 1st column is normal field.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.
Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Aware Programming & Consulting - Tampa FL
Re: Anyone know how to do Field ToolTip NOT using Aware
Well, I use this solution mostly for static information i.e help info that always is the same etc. so in your form example I would just have the information as HTML directly on the form (think HTML row with the actual HTML that produce the tooltip). The information is mostly static as mentioned so can be built into the form directly like above, in scenarios where the information would be dynamic like a query I would use tags (data-content='<<Object.Attribute>>'). I also use a SystemSettings object in some cases (I have a separate SystemSettings BO for every system module that keeps information related to the module).Jaymer wrote:Henrik, I like your example also. Thats a nice standard to have those all throughout an app for user info.hpl123 wrote: i.e you can populate a HTML BO attribute with the HTML for the popover and then in the render script initialize the actual popover.
Q: So lets say you have 30-50 of these HELP icons throughout your system, so you need 50 fields/tuples accessible with this HTML.
Exactly how do you may any given one (or more) of these be in context when needed?
If I was on a Customer Grid, then clicked [New Customer] (create object built-in operation), How am I going to have 3, for example, help tips to show up on the Customer Entry Form? What BO would be in context to allow the render script to populate your tip variable, besides LIRU & SS?
If I added 50 fields to SystemSettings, that would make this easy - but seems too simple, straightforward, non-flexible for multi-tenant, etc.
So you must have some cool innovative way to accomplish this. Can you share?
... or maybe you can't use a built-in create anytime you need this, and you have to use a process to ENTER NEW all the time?
jaymer...
Henrik (V8 Developer Ed. - Windows)
-
- Posts: 619
- Joined: Wed Jun 17, 2015 11:16 pm
- Location: Omaha, Nebraska
- Contact:
Re: Anyone know how to do Field ToolTip NOT using Aware
There are more elegant approaches, as I absolutely do like the idea of adding database columns for UI details such as this.
But having said that ... the simplest method is to use two BO attributes such as PrivateValue & PrivateIcon.
In the BO
1. Add PrivateValue & PrivateIcon attributes
2. Add a BO rule to keep the values of each in sync
In the query:
1. Set PrivateValue to show Value Only and in the Column settings set it to Initially Hidden. By doing so, the attribute is available, but the grid column is hidden.
2. Set PrivateIcon to show Icon Only
3. Use the PrivateValue attribute in the If Condition in the Tooltip function.
But having said that ... the simplest method is to use two BO attributes such as PrivateValue & PrivateIcon.
In the BO
1. Add PrivateValue & PrivateIcon attributes
2. Add a BO rule to keep the values of each in sync
In the query:
1. Set PrivateValue to show Value Only and in the Column settings set it to Initially Hidden. By doing so, the attribute is available, but the grid column is hidden.
2. Set PrivateIcon to show Icon Only
3. Use the PrivateValue attribute in the If Condition in the Tooltip function.
VocalDay Solutions - Agility - Predictability - Quality
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
We specialize in enabling business through the innovative use of technology.
AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t