Custom tooltip component.

[dolby360]

Right now the tooltip component is hard coded in the item file. And honestly, I'm not extremely happy with the styling.

I think we shall provide the users the option to pass component styling using props. For example:

const costumeStyle = {/*some style here*/}

<HexColorDisplay 
toolTipStyle={costumeStyle }
offsets={data_example} 
bin={raw} 
/>

Please make sure you pass this style through here, and it shall be something like this:

            <Item
               toolTipsStyle={this.props.toolTipStyle}
                byteString={byteString}
                gId={gid}
                iId={iid}
                updateItemsStyle={this.updateItems}
                myStyle={style}
                data={data}
                indexInList={index}
                color={color}
                masterGid={masterGid}
            />

Eventually, this shall seep down to Tippy component here. Item shall have a check if this prop is undefined or not, If undefine then use default. otherwise use customized props.

export const Item = (props) => {
   let toolTipStyle = someDefault;
    if(props.toolTipStyle ...........){
       toolTipStyle = props.toolTipStyle
   }
    return(
        <Tippy content={<p style={toolTipStyle}>{props.data}</p>}>
            <li key={props.indexInList} style={getStyle(props.myStyle,props)}
            onMouseOver={ () => mouseEvent(props) } 
            >
                {props.byteString}
            </li>
        </Tippy>
    )
}

Please make sure you update the readme with this new feature.
Please add a story to storybook to demonstrate this feature.
Please check the contribution.md file.