Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

Tips for the field displayed next to it.

Tomasz Bryla
Contributor
March 5, 2019

Hi!

I use this script to display instructions for field after hovering on question mark icon. Problem is that, icon is display under the custom field, i would like display this next to field. I'm not javascript developer and I search for some ready solution. Does anybody know how to do this?

 

<script type="text/javascript">
function showDaneKlienta(oEvent) {
var oDiv = document.getElementById("DaneKlientaHelp");
oDiv.style.visibility = "visible";
oDiv.style.left = oEvent.clientX + 5;
oDiv.style.top = oEvent.clientY + 5;
}

function hideDaneKlienta(oEvent) {
var oDiv = document.getElementById("DaneKlientaHelp");
oDiv.style.visibility = "hidden";
}
</script>
<div id="DaneKlientaHelp1"
style="display: inline-block;"
<a href="#" onmouseover="showDaneKlienta(event)" onmouseout="hideDaneKlienta(event)";
return false;"><img src="/images/icons/ico_help.png"/></a>

</div>
<div id="DaneKlientaHelp"
style="background-color: white; position: absolute; visibility: hidden; display: inline-block; padding: 5px">
<span style="font-weight: bold">My text with instruction.</span><br />
</div>

obraz.png 

1 answer

0 votes
Hector
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 5, 2019

Hi @Tomasz Bryla , 

I believe you are adding that snipped code directly on the field's description, am I right? If so, the reason is that description text is always shown in a specific div right after the field's HTML entity (select, input, etc).

If you would like to have similar result than with Estimations field (see an example as follows):

estimations.png

Then I suggest that you replicate same structure as done by Jira such us:

estimations+code.png

Basically adding the element A after the field you want to have it linked. For that, you will need to use some DOM modifier with JS or Jquery to add elements on the right position, etc..

Hope it helps!

Suggest an answer

Log in or Sign up to answer