Skip to main content
MindTouch Success Center

Configure the contextual help dialog

This page applies to:MindTouch (current)

DEPRECATED! This page has been deprecated. Content on this page is no longer supported. Please contact Support or search our Success Center for supported solutions.

The following table lists the F1 dialog controls that can be configured.  These options can be used inside the F1.text field when opening the F1 dialog programmatically.
 

Text field options

Field Name Type Description
back string Label for back link (default: 'Back'). Back link is omitted if string is null.
backtitle string Title attribute for back link (default: same as label, unless label is blank, then it's 'Back').
forward string Label for forward link (default: 'Forward'). Forward link is omitted if string is null.
forwardtitle string Title attribute for forward link (default: same as label, unless label is blank, then it's 'Forward').
home string Label for home link (default: 'Home'). Home link is omitted if string is null.
hometitle string Title attribute for home link (default: same as label, unless label is blank, then it's 'Home').
open string Label for open article link (default: 'Open Article'). Open article link is omitted if string is null.
opentitle string Title attribute for open link (default: same as label, unless label is blank, then it's 'Open Article').
search string Label for search button (default: 'Go'). Search box and button are omitted if string is null.
hint string Hint text shown in search box (default: 'search').


Customize the close button


The close button can not be customized through the F1.text options. It can only be customized with CSS. Here is what the HTML markup looks like.

<span class="mtf1-close"></span>

You will need to know CSS and how to link to a custom CSS file in your F1 configuration. Go to our How to customize F1 CSS tutorial to learn how.
 

Example 01 - A custom button


Here we add a custom forward button label and a custom title tag:

<div class="F1_7_1">Open dialog with custom forward button 
<img src="http://cdn.mindtouch.us/f1/f1.png" /></div>
<script type="text/javascript">
    $('.F1_7_1').click(function() {
        F1.open({
            text: {
                forward: '>>',
                forwardtitle: 'Forward'
            }
        });
    });
</script>

The result:

File:F1/F1_Dialog/006_Dialog_Options/custom-forward-button.jpg
 

Example 02 - A custom search field


Here we customize the search button and add a custom hint into the field:

<div class="F1_7_1">Open dialog with custom forward button 
<img src="http://cdn.mindtouch.us/f1/f1.png" /></div>
<script type="text/javascript">
    $('.F1_7_1').click(function() {
        F1.open({
            text: {
                search: '&gt;',
                hint: 'Enter Search Term'
            }
        });
    });
</script>


The final result:

File:F1/F1_Dialog/006_Dialog_Options/custom-search-field.jpg

 

 



 

  • Was this article helpful?