Aterisk and Tooltip Issue

Forums Dynamic Forms for SharePoint Aterisk and Tooltip Issue

This topic contains 5 replies, has 2 voices, and was last updated by  Alexander Bautz 3 months, 2 weeks ago.

  • Author
    Posts
  • #19557

    Jeffery McElroy
    Participant

    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?

  • #19623

    Alexander Bautz
    Keymaster

    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

  • #19625

    Jeffery McElroy
    Participant

    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:
  • #19676

    Alexander Bautz
    Keymaster

    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

  • #19684

    Jeffery McElroy
    Participant

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

  • #19730

    Alexander Bautz
    Keymaster

    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

You must be logged in to reply to this topic.