Aterisk and Tooltip Issue

[Jeffery McElroy]

When I add a tooltip to a field, both the required asterisk and the tooltip are spaced out to the left from the field name (see image). I am using side-by-side fields with the label positioned on top. How can I get the asterisk and tooltip to align next to the field name properly without the added spacing?

Attachments:

1. 

   Asterisk-and-ToolTip.png
   

[Alexander Bautz]

Hi,
The tooltip is by default floated right, but it can be moved with some custom code. If you want it to go in front of the label you can use this in Custom CSS:

.customTooltip{
    float:left!important;
}

If you need to add it to the right of the label I’ll have to create a little snippet for the Custom JS.

The required star placement looks a bit odd – can you right click it and select “inspect” and add a screenshot of the HTML code from the console?

Alexander

[Jeffery McElroy]

Here is the code from the developer console for the required star. Also, I would like to have the tooltip icon to the right of the label with no added spacing if possible.

Attachments:

1. 

   Asterisk.png
   

[Alexander Bautz]

Try adding this to the Custom CSS:

.customTooltip{
    float:none!important;
    display:inline-block;
}
.ms-standardheader{
    margin-right:0!important;
}

And this to the Custom JS:

jQuery(".customTooltip").each(function(i,t){
    jQuery(t).appendTo(jQuery(t).parent().find(".ms-standardheader"));
});

Let me know how it works out.

Alexander

[Jeffery McElroy]

Getting close, but how can I make the tooltip appear to the right of the required field asterisk? With the above code, the order is [Field Name][Tooltip][Asterisk].

[Alexander Bautz]

Sorry, but currently it will not be easy to have the asterisk to the left of the tooltip because this is inserted dynamically and is appended to the “td” and it will therefore be the rightmost item (unless you keep the original position of the help icon because it is floated right).

Alexander

[Author]

Posts