Help text when hovering over a field

[Aloha24]

In any datapage, is there a way to include help text that would display when the user's cursor is over the appropriate field? Example:

Field Name = Initial Approval Date, I would like to add that this is the same as the Proposal Date. If I enter Initial Aproval/Proposal Date the field label is too long.

Thanks

Chris

[bahar_vm]

To display a hint box on mouse over a field, a combination of Java Script programming and CSS styles is needed which is abit complicated.

I would suggest you to have it as label however you could put

break lines within the labels so it does not appear in just one line.

i.e. Initial Approval/

Proposal Date

Best,

Bahar M.

[cheonsa]

Hi, 

 

Caspio improves its features as the years passed by. You can now display hints without custom JS coding.

Please refer to this link: https://howto.caspio.com/datapages/datapage-components/field-configuration-options/rollover-hints/

 

Regards,

kristina

[autonumber]

Hi! Just to update this post. I have a workflow where I have a link that redirects to another DataPage and what I want to achieve is when I hover this link or column in my report, it should display or populate the email address field from the same table. 

I was able to find a solution using CSS. Here's what I did:

HTML block where I created the link, I added a class and data-text attribute. 

<a class="tooltip" data-text="[@field:Email]"  href="https://acct.caspio.com/dp/052890006c860c7fed">[@field:ID#]</a>

Now, I added the code below into the header of my DataPage: 

<style>

.tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
}

.tooltip:before {
  content: attr(data-text);
  position:absolute;
  left: 50%;
  margin-left: -60px;
  z-index: 1001;
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#E5E5E5;
  color: black;
  text-align:left;

  display:none; /* hide by default */
}
.tooltip:hover:before {
  display:block;
}
</style>

Here's the output: 

 

Feel free to modify the existing style for the class (.tooltip:before ) excpet on the content attribute as this is the part where we are getting the value from the table. You can also add some style depending on your preference. 

 

Hope this helps!

[Tubby]

3 hours ago, autonumber said:

Hi! Just to update this post. I have a workflow where I have a link that redirects to another DataPage and what I want to achieve is when I hover this link or column in my report, it should display or populate the email address field from the same table. 

I was able to find a solution using CSS. Here's what I did:

HTML block where I created the link, I added a class and data-text attribute. 

<a class="tooltip" data-text="[@field:Email]"  href="https://acct.caspio.com/dp/052890006c860c7fed">[@field:ID#]</a>

Now, I added the code below into the header of my DataPage: 

<style>

.tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
}

.tooltip:before {
  content: attr(data-text);
  position:absolute;
  left: 50%;
  margin-left: -60px;
  z-index: 1001;
  width:200px;
  padding:10px;
  border-radius:10px;
  background:#E5E5E5;
  color: black;
  text-align:left;

  display:none; /* hide by default */
}
.tooltip:hover:before {
  display:block;
}
</style>

Here's the output: 

 

Feel free to modify the existing style for the class (.tooltip:before ) excpet on the content attribute as this is the part where we are getting the value from the table. You can also add some style depending on your preference. 

 

Hope this helps!

Big thanks for this! I was able to use it in my app. In my case, I need to apply it to a normal field column, I don't need a hyperlink. The solution I made is to use HTML block for the column instead of the actual field and make the field a link BUT change it in the CSS so it looks like a normal field.



I simply edited the CSS code for the class " tooltip" and removed the text decorations and changed the color to black:
 

.tooltip {
position:relative; 
text-decoration: none !important;
color: black !important;
}