You are viewing limited content. For full access, please sign in.

Question

Question

Tooltips appearing on the top left corner of the Form in tiny font.

asked on September 13, 2022 Show version history

Hi,

I have tooltips defined on a few fields in a Form. Defined under the Advanced tab of normal fields. When they are shown, it's at the top left of the form and in very small font.

Could someone help with this problem please. I would like to see the tooltips close to the fields where the cursor is.

Thanks.

 

0 0

Answer

SELECTED ANSWER
replied on September 13, 2022

Which version of Forms? Do you have any custom CSS on the form?

Normally the tooltips hover right near the (?) by the field label, so what you're seeing is not normal behavior; one possible culprit is custom CSS affecting those elements.

1 0
replied on September 13, 2022 Show version history

Thanks for the reply.

The Forms version is 11.

Yes there are CSS statements, which I have included here. Would you know which stmnt could be the culprit.

Thanks again.

#loaderback {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #DAE3ED;
}  

#wcloader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1000;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#gmap {
    height: 300px;
    border-radius: 10px;
}

.opaque {
 opacity: 0.0; 
}  


.m-l-20 {
    padding-top: 30px !important;
    padding-left: 20px !important;
}  

.projecticon {
  margin:auto;
  margin-bottom:10px;
  display:block;
   text-align:center; 
   padding:20px; 
   background-color:lightgrey; 
   border-radius:5px; 
   font-size:12px; 
  font-weight: strong;
  cursor:pointer;
  
}

.projecticon:hover {
  background-color:#ededed;
}

.projecticon.active {
 background-color: #a8a8a8; 
  color:#fff;
}


.projecticon .fa {
  color:#2d93c5;
}

.projecticon.active .fa {
  color:#fbb03b; 
}

/*
fld name Number/Number2
css row_count
fld# q420*/


/*hide agri structures table's row count field (Number2)*/
#row_count2 label, [data-col="q687"] > * {
  display:none; }
#q687 {display: none; }

/*hide res structures table's row count field (Number)*/
#row_count label, [data-col="q420"] > * {
  display:none; }
#q420 {display: none; }
;

/*hide Los table's row count field (LoRowNum )*/
#row_count label, [data-col="q689"] > * {
  display:none; }
#q689 {display: none; }
;

#q419  .form-q:nth-child(even) .rpx {
  background-color: gray;
}

 

0 0
replied on September 13, 2022

Nothing is really jumping out at me, but it's hard to say because it could be a problem with a parent or something; the easiest thing would be to comment it all out and see if the problem goes away.

If it doesn't go away then it might be something else like JavaScript.

If it does go away, gradually add one selector back at a time to find the culprit.

1 0
replied on September 13, 2022

Thanks will try this.

0 0
replied on September 13, 2022

All the CSS has been removed and the problem is still there. Next step is to remove the JavaScript and see it the problem is with that.

0 0
replied on September 14, 2022

Can you also provide a screenshot of the form to illustrate the issue?

1 0
replied on December 6, 2022

Thanks guys.

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.