Mouse Hover Popup that shows field parameters

[Ras2019]

Hi,

I would like to make a mouseover popup in a HTML Block/Link in a result page, so user do not have to click to enter the full details page.

The popup will just quickly list some main milestones (field values) that are in the details page. 

Relative to this without graphics, i just need 8 fields listed .:

 

I suppose i have to make a HTML data page, that is resized somehow and then pull that as a popup.

Does any one have some tips or script references?

Sincerely

Ras

 

Edited November 11, 2019 by Ras2019
spelling

[Vitalikssssss]

Hi @Ras2019,

Recently, I have came across the web-site of Caspio Technical Evangelist Ned:  https://someapp.com/np/apps/workflow/index.html 

He has an article which explains how to create a Tool Tip in Caspio: https://someapp.com/np/apps/workflow/tooltip_popup.html

Hope it helps.

Regards,

vitalikssssss

 

 

[Ras2019]

Hi Vitalikssssss,

Thanks for the tip.

That was excately what i was looking for and it works great!

Sincerely

Ras 

[Ras2019]

Hi.

This Tool Tip script was great, and I used it for testing on a Weebly.com site and it worked like a charm...

Since I have now moved all my datapages over to a Bootstrap Dashboard, away from Weebly the script does not work as before .. suspect its due to CSS code on the new site.

I have tried make the Tool Tip script overwrite any existing CSS, by adding !important...but in vain... do you Vitalik or anyone have a suggestion of how to make this script take precedence over any other existing CSS?

Script in Header:

<style>
.tooltip {
   border-bottom: 1px dotted #000000; color: #000000; outline: none;
   cursor: help; text-decoration: none;
   position: relative;
  } 
  .tooltip span {
   margin-left: -999em;
   position: absolute; 
  }
  .tooltip:hover span {
   border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
   box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
   font-family: Calibri, Tahoma, Geneva, sans-serif;
   position: absolute; right: 1em; top: 2em; z-index: 99;
   margin-left: 0; width: 150px; 
  }
  .tooltip:hover img {
   border: 0; margin: -10px 0 0 -55px;
   float: right; position: absolute; 
  }
  .tooltip:hover em {
   font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
   display: block; padding: 0.2em 0 0.6em 0; 
  }
  .classic { padding: 0.8em 1em; }
  * html a:hover { background: transparent; }
  .classic {background:#FFFFFF; border: 1px solid #72A435; 

</style>

Code in HTML Block

<a class="tooltip" href="#">Info<span class="classic">
<b>Flight#</b>:[@field:Vessel]<br/>
<b>Aircraft Type</b>:[@field:Aircraft_Type]<br/>
<b>Cut Off</b>:[@field:Cut_Off]<br/>
<b>Transit Time</b>:[@field:Transit_Time]<br/>
<b>Stops</b>:[@field:Stop]<br/>
<b>Transit Airport</b>:[@field:Transit_Via]<br/>
<b>2nd Carrier</b>:[@field:Carrier_2]<br/>
<b>2nd Flight#</b>:[@field:Vessel_2]<br/>
</span></a>

  

Sincerely

Ras

[Ras2019]

Hi, 

Apparently, that script was not fond of Bootstrap, so i ended up finding a new Tooltip that works just a good. If anyone else experience same issues you can find some good examples for Bootstrap here https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php

Thanks 

Ras

[autonumber]

Hello! Just to update this post, you can display fields parameters when you hover a field on your results page. You may refer to this forum post: