Create an 'more informtion button'

Forms
1

Hello,

I would like to add a functionality where the user clicks on an information button or tiny message and a pop up appears in the form to explain a particular field in more detail. Is this possible?

Please see the picture below:

image
image974×514 51 KB

Thank you in advance!

2

Hello @Qman,

You can try out the approach from this post:

3

Hi @Margo,

Here is an example of what I'm looking for:

I also want to make the tooltip interactive. If the user moves their cursor over this, they can see more information OR if they click on the button, they're directed to an FAQ page or something.

How do ensure that the tooltip is placed next to this field?

image
image871×82 1.82 KB

Thanks for your help! :slight_smile:

4

Hello @Qman,

The tooltip can be shown on hower and the dialog box can be opened on click.

You can add a link using the HTML control, or inject the code using jQuery.

5

Right, do you have any documentation on this? So I can look into this further?

6

@Qman,

You can find how to open a dialog from the form here:
https://plumsail.com/docs/forms-sp/javascript/dialog.html

And the tooltip can be added using the Title attribute:

1 Like
7

Hi @Margo,

I cooked up this code but it doesn't seem to work.

//Dialog box
fd.spRendered(function() {
$('Button1').click(function() {
$('Button1').dialog("open");
});

$('Button1').dialog({
title: 'title'

});

});

Here is the error I have on Console:

image

8

@Qman,

If you want to open a dialog box on button click; firts, you need to define Dialog globally in the JavaScript editor like this:
image

window.Dialog = Dialog;

Then you can and the code below to the button's Click property:

image

Dialog.open("Page_URL",
    { args: 'something' }, function(hasSaved) {
    if(hasSaved){
        alert('Form in dialog has saved and closed.');
    }
    else{
        alert('Dialog form was closed without saving!');
    }
}, { width: 600, height: 600  });
1 Like
9

Awesome! This is what I needed!

How do I add a Title & Text inside the box and can I use the code above for hyperlink control?

Many Thanks!

10

@Qman,

You can define the dialog box title in the dialog options like so:

Dialog.open("Page_URL",
    { args: 'something' }, function(hasSaved) {
    if(hasSaved){
        alert('Form in dialog has saved and closed.');
    }
    else{
        alert('Dialog form was closed without saving!');
    }
}, { width: 600, height: 600, title: "New Title"  });

The text inside the dialog box is the content of the page that opens in a dialog.

1 Like
12

Hi Mnikitina,

I am using a redacted version of the code you have provided and the title isn't displaying for some strange reason:

Is there a need to add the 'has saved' function in the code?

Dialog.open("Page URL",
{width: 600, height: 600, title: "Previet" });
13

@DryChips,

If you don't want to pass arguments or define a function, just leave properties blank like this:

Dialog.open('Page_URL',
   {}, {}, { width: 600, height: 600,  title: "New Title" });
2 Likes