@domoinc/image-tooltip/README.md

ImageTooltip - Domo Widget

# 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:  
```js
function validate(d) {
	          return true;
	        }
```

Default accessor:  
```js
function accessor(line) {
	          return line[2];
	        }
```

#### LinkURL
Type: `string`

Default validate:  
```js
function validate(d) {
	          return true;
	        }
```

Default accessor:  
```js
function accessor(line) {
	          return line[3];
	        }
```

#### Text
Type: `string`

Default validate:  
```js
function validate(d) {
	          return true;
	        }
```

Default accessor:  
```js
function accessor(line) {
	          return line[1];
	        }
```

#### Title
Type: `string`

Default validate:  
```js
function validate(d) {
	          return true;
	        }
```

Default accessor:  
```js
function accessor(line) {
	          return line[0];
	        }
```

## Events


#### Dispatch Events

#### External Events


## Example

```js  
/*----------------------------------------------------------------------------------
 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);

```