@domoinc/image-tooltip

ImageTooltip

Configuration Options

chartName

Type: string
Default: "Image"

Name of chart for Reporting.

font

Type: font
Default: "Open Sans"

Font type for the tooltip text

height

Type: number
Default: 400
Units: px

Height of the widget

isOnMobile

Type: boolean
Default: false

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

showErrorMessage

Type: boolean
Default: true

undefined

tooltipBackgroundColor

Type: color
Default: "#555555"

Background color for the tooltip

tooltipBodyFontColor

Type: color
Default: "#FFFFFF"

Font color for the tooltip body text

tooltipBodyFontSize

Type: number
Default: 12
Units: px

Font size for the tooltip body text

tooltipBodyFontWeight

Type: select
Default: {"name":"300 - Light","value":300}

Greater values correspond to increased font boldness (some fonts do not support every value)

tooltipTitleFontColor

Type: color
Default: "#FFFFFF"

Font color for the tooltip title

tooltipTitleFontSize

Type: number
Default: 12
Units: px

Font size for the tooltip title

tooltipTitleFontWeight

Type: select
Default: {"name":"300 - Light","value":300}

Greater values correspond to increased font boldness (some fonts do not support every value)

tooltipTitleTextJustification

Type: select
Default: {"name":"Left Justification","value":"left"}

The text justification for the tooltip title

tooltipWidth

Type: undefined
Default: 200

Width of the tooltip

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

ImageURL

Type: string

Default validate:

function validate(d) {
	          return true;
	        }

Default accessor:

function accessor(line) {
	          return line[2];
	        }

LinkURL

Type: string

Default validate:

function validate(d) {
	          return true;
	        }

Default accessor:

function accessor(line) {
	          return line[3];
	        }

Text

Type: string

Default validate:

function validate(d) {
	          return true;
	        }

Default accessor:

function accessor(line) {
	          return line[1];
	        }

Title

Type: string

Default validate:

function validate(d) {
	          return true;
	        }

Default accessor:

function accessor(line) {
	          return line[0];
	        }

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var imageUrl = 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg';
var bodyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
var sampleData = [
  ['Title', bodyText, imageUrl, 'https://www.domo.com/']
];

//Initialze the widget
var chartGroup = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '500px'
  })
  .append('g');
var chart = new ImageTooltip(chartGroup)
  .c({
    width: 250,
    height: 250
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(sampleData);