Jump to content
  • 0
Ras2019

Mouse Hover Popup that shows field parameters

Question

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 .:

image.png.9955ba10c4c384db5592e98b820948ce.png 

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 by Ras2019
spelling

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...