A callout is an area on your page where the reader mouses over or clicks and a popup box emerges containing HTML content. The callout can contain text, images or other HTML content. The content in a call out is hidden on the page until the user activates it by clicking on or mousing over the area that houses the callout information. Some HTML knowledge may be required. Otherwise Realview can organise some templates for you to work with.


Note: Please create the overlay by clicking and dragging on the page to create the hotspot before drawing the popup area.


  • Draw Callout – After dragging the overlay on the page for the hotspot, you will need to draw the callout via this button. This is the area where content of the callout will be displayed after being activated by the reader. Once drawn, hit ‘Finish Drawing’. After drawing your callout your measurements for positioning ‘Left, Top, Width, and Height’ (Measured by the percentage of the page %) will be filled out automatically and can be manually changed anytime.
  • Callout Class Name –
    • ‘Normal’: This is used mainly for text and HTML within the contents table and creates padding within the callout which pushes the contents closer to the centre.
    • ‘Image’: This is used for when you are using an image within the callout. Choosing image removes the padding to make more room for the image.
  • Contents (HTML Code) – Please enter the text or HTML that you would like to use.
  • Callout Style (inline CSS) – See advanced below (optional field)
  • Hotspot Style (inline CSS) – See advanced below (optional field)
  • Animation – Defines the way the callout will pop up and disappear.
    • ‘Expand’: This will cause the callout to expand to its full size from within the publication and will then shrink out of view after closing.
    • ‘Fade’: After clicking or hovering over the callout it will fade into view. Moving away from the callout area will cause the popup to fade away.
    • ‘None’: This will make the callout appear and disappear without any effects.
  • Launch Callout On – Defines how the reader will open the callout.
    • ‘Click’: The callout will only activate if you click on the hotspot.
    • ‘Mouseover’: The callout will activate when you hover over the hotspot.
  • Close Callout On – Defines how the reader will close the callout.
    • ‘Click’: The callout will only close if you click back on the hotspot.
    • ‘Mouseout’: The callout will close if you remove the mouse from the hotspot area.

Note: Do not mix the ‘Click’ and ‘Mouseovers’ for ‘Launching and Closing the Callout’. Please either use Click for both fields or Mouseover and Mouseout.


Advanced

  • Hot Spot Style (Inline CSS) – Add inline style for callout hotspot. For example: background-color:green; border:1px red solid; ...
  • Callout Style (Inline CSS) - Add inline style for callout to customise the wrapper/block of the callout. For example: background-color:green; border:1px red solid; ...