Dyalog MiServer 3 Sample Site

jBox Widget - Advanced sample: more fun with tooltips!

Disclaimer

Tooltips

Hover here for a demo of Tooltips with titles! We will be re-using the configuration of the dd-Element (in the APL-Source) to reduce the # of JS-Calls.

:Class jBoxAdvanced : MiPageSample 
⍝ Control::     _JS.jBox 
⍝ Description::Advanced jBox-Tooltips 
 
    ∇ Compose;tab;jTab;dt;columns;ocw;dd;daSpan;NiceDiv;t3 
      :Access public 
 
      Use'faIcons5css' 
      Use'dcPanel'  ⍝ required by Panel that is used in callback function 
       Add _.style'.demo {padding-top:2px; background-color: orange;}' 
     
      (Add _.jBox).Selector←'.tooltip' 
      
      Add _.h2'jBox Widget - Advanced sample: more fun with tooltips!' 
            Add _.h3 'Disclaimer' 
            Add 'The following examples use ' 
            '.demo'Add _.span 'this style' 
            Add ' to indicate click-sensitive regions that are linked to the documented functionality.' 
            Add 'This styling is only used to facilitate use of these examples and should in no way serve as example for your use-cases! ;-)' 
 
            Add _.h3'Tooltips'      
 
      (dd←Add _.jBox).Selector←'.tooltipclicked' 
      'getTitle'dd.Set'data-jbox-title' 
      'getContent'dd.Set'data-jbox-content'   ⍝  use jBox-related attributes 
      'trigger'dd.Set'click'   ⍝ click to show tooltip! 
      t1←Add _.span 'This texts''s tooltip will appear (and disappear) when you click on the text!' 
     ⍝ Following declarations (in combination with the dd-jBox assigned before) are sufficient to create the tooltips. All clickable ttips 
     ⍝ can then be created just using the attributes data-jbox-content (and optionally data-jbox-title) on elements with class "tooltipclicked" 
      t1.Set'data-jbox-content="Not that I''d have to say anything...!"' 'class="demo tooltipclicked"' 'data-jbox-title="Important title!"' 
      
      (dd←Add _.jBox).Selector←'.tooltip2' 
      'getTitle'dd.Set'data-jbox-title'           ⍝ the following applies to all items with class="tooltip2", all set up with this one instance! 
      'getContent'dd.Set'data-jbox-content' 
      Add _.p ScriptFollows 
    ⍝ Hover <span class="tooltip2 demo" data-jbox-title="Did you notice?" data-jbox-content="A tooltip with a title!"> 
    ⍝ here</span> for a demo of Tooltips with titles! 
    ⍝ We will be <span class="tooltip2 demo"  data-jbox-title="How to do that" data-jbox-content="By applying it to all items with a class='tooltip2', as you can see in the source..."> 
    ⍝ re-using</span> the configuration of the dd-Element (in the APL-Source) to reduce the # of JS-Calls. 
           
      'style="color:green"'(NiceDiv←'#NiceDiv'Add _.div).Add _.Icon'fa-thumbs-up fa-3x' 
      NiceDiv.Add'Wow! This larger, model tooltip features <b>exciting</b> HTML-Layout and lots of text. Everything is possible!...<br /><br />' 
      NiceDiv.Add'This tooltip will disappear on any click or also when you press the Esc-Key!<br />' 
      NiceDiv.Add'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore<br /> et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br />Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,<br />consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br />sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea<br />takimata sanctus est Lorem ipsum dolor sit amet.' 
      NiceDiv.Set'style=display:none'  ⍝ must be hidden in normal display...! 
      
      Add'This text has a larger, modal tooltip that appears ' 
      t3←'.tooltip3 demo'Add _.span'when you click here!' 
      dd←Add _.jBox'Modal' 
      dd.Selector←'.tooltip3' 
      'title'dd.Set'Content for popup is taken from a div on the page' 
      'content'dd.Set⊂'$("#NiceDiv")' 
      'closeOnEsc'dd.Set _true 
      'closeOnClick'dd.Set _true 
       
      Add _.br 
      dd←'.demo'Add _.jBox'Tooltip' 'Hello world! Weather is a bit shaky today! ;-)' 'Tis example shows an animated and styled tooltip!' 
      'animation'dd.Set'tada' 
      dd.Theme←'TooltipDark' 
    ∇ 
:EndClass