Add icon in Editor field

Mairie du Pecq

Is there a way to do that easily ?

I want to add an icon when a field is filled and when i put my cursor on that icon, he show a tooltip with a map ?

Or maybe with a tooltip direclty on the field

Or an other idea if you have one.

Thx for the help.

rf1234

I use tooltips a lot with Editor. I mostly attach them to the label not the field itself. But it shouldn't be a problem to attach them to the field as well.

I use qtip2 which is quite handy.
https://cdnjs.com/libraries/qtip2
https://qtip2.com/

These are the settings I use for Editor:

//for Editor we want the tooltips on the right side and moving with the mouse
$.extend( true, $.fn.qtip.defaults, {
    position: {
        my: 'top right',
        at: 'bottom left',
        target: 'mouse'
    },
    hide: {
        event: 'mousedown mouseleave', // Hide on mouse out by default
    },
    style: {
        classes: 'qtip-bootstrap',
        tip: {
            corner: true
        }
    }
});

I also use extra wide Editor modals. For those I use these additional settings:

$.extend( true, $.fn.qtip.defaults, {
    style: {
        classes: 'qtip-bootstrap wide-qtip',
    }
});

On Editor open I execute the code that attaches the tooltip to the respective field label or the field itself. Can be quite complex :-)

editor
    .on('open', function(e, mode, action) {  
        $('label:contains(Manuelle Kreditoren der Ziel Behörde mitlöschen?)').qtip({ content: { text: 
            'Wenn die Zielverträge gelöscht werden sollen, empfiehlt es sich, \n\
             die manuellen Kreditoren der Ziel Behörde ebenfalls zu löschen, und \n\
             dann ggfs. die Verträge neu zu kopieren.<br>\n\
             <strong>Ausnahme:</strong> Es werden die Verträge von \n\
             <strong>mehreren Abteilungen derselben Behörde</strong> \n\
             hintereinander kopiert. Dann bitte die manuellen Kreditoren \n\
             <strong>nur beim Kopieren der ersten Abteilung mitlöschen!!</strong>' }
        });
        var gov_regional_12_text = 
            'Der 12 stellige eindeutige Regionalschlüssel besteht aus:<br>\n\
             <ul> \n\
             <li>2-stelliger Länderschlüssel (01-16): <strong>Für Test >= 17 verwenden</strong></li>\n\
             <li>1-stellige Kennzahl des Regierungsberzirks oder 0\n\
             <li>2-stellige Kennzahl Landkreis / kreisfreie Stadt\n\
             <li>1-stelliges "t-Kennzeichen": <br>0 = verbandsfrei, <br>5 = verbandsangehörig. <br>9 = gemeindefrei\n\
             <li>3-stelliger Gemeindeschlüssel\n\
             <li>3-stellige Gemeindekennzahl (000, wenn kein Mitglied eines Verbands)\n\
             </ul>';
        $('label:contains(12stelliger Regionalschlüssel)').qtip({ content: { text: 
            gov_regional_12_text }
        }); 
        $('#DTE_Field_gov-regional_12').qtip({ content: { text:    
            gov_regional_12_text }, hide: { event: 'mouseleave' } //shouldn't be hidden on click!
        }); 
        if ( checkExists('#contractEntryGovPage') ||   //pages were elements can be edited
             checkExists('#contractCredPage')     ||
             checkExists('#proposalCredPage')          ) { 
            $('label:contains(Ende):not(:contains(Zinsperiode)):not(:contains(Wirtschaftliches)):not(:contains(WV))').qtip({ content: { text: 
                'Wenn es sich nicht um ein Derivat (ausser Swap) handelt und das \n\
                 Geschäft <strong>nicht nur endfällig getilgt </strong>wird:<br>\n\
                 <strong>Sie dürfen das End-Datum freilassen!</strong> \n\
                 Es wird dann systemseitig berechnet als Zeitpunkt der \n\
                 Volltilgung des Geschäfts = ökonomisches Laufzeitende.' }
            });
        }
    })

.wide-qtip {
    max-width: 620px;
    min-width: 0px;
}
.ui-tooltip, .qtip{
    position: absolute;
    left: -10000em;
    top: -10000em;

    max-width: 280px; /* Change this? usual setting is 280px*/
    min-width: 50px; /* ...and this! ususal setting is 50px */
}

allan

Also, check out field().node() to get the container element for a field and field().input() to get the input element. You can then use jQuery / DOM methods to insert the extra element:

var editor = new DataTable.Editor({
  // ...
});

var input = editor.field('myField').input();
$('<div class="tooltip"></div>').after(input);

Allan

Mairie du Pecq

Thank you very much Rf1234 for all the explanations. Thx Too Allan !

rf1234

You are welcome. This is the complicated one with the long text. In this case I attached the same tooltip to the Label and the field itself.

The screenshot shows the one that is attached to the field:

$('#DTE_Field_gov-regional_12').qtip({ content: { text:   
    gov_regional_12_text }, hide: { event: 'mouseleave' } //shouldn't be hidden on click!
});

Mairie du Pecq sounds like public sector. The regional key displayed in the screenshot is the regional key of the state of Berlin. (Berlin has its own state - just like Washington with the District of Columbia.)