Add icon in Editor field

Add icon in Editor field

Mairie du PecqMairie du Pecq Posts: 9Questions: 3Answers: 0

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.


  • rf1234rf1234 Posts: 2,708Questions: 82Answers: 392
    edited September 21

    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.

    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 :-)

        .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\
            $('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 */
  • allanallan Posts: 60,278Questions: 1Answers: 9,785 Site admin

    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);


  • Mairie du PecqMairie du Pecq Posts: 9Questions: 3Answers: 0
    edited September 21

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

  • rf1234rf1234 Posts: 2,708Questions: 82Answers: 392
    edited September 21

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

Sign In or Register to comment.