const React = require('react');

const divStyle = {
  backgroundColor: 'whitesmoke',
  position: 'absolute',
  bottom: 0,
  paddingLeft: 4,
  paddingRight: 16,
  borderTopRightRadius: 4
};

const spanStyle = {
  color: 'gray'
};

class HoveringURL extends React.Component {
  render() {
    return (
      <div style={divStyle}>
        <span style={spanStyle}>
          {this.props.targetURL}
        </span>
      </div>
    );
  }
}

HoveringURL.propTypes = {
  targetURL: React.PropTypes.string
};

module.exports = HoveringURL;

const React = require('react');

const style = {
  color: 'gray',
  backgroundColor: 'whitesmoke',
  maxWidth: '95%',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  position: 'absolute',
  bottom: 0,
  paddingLeft: 4,
  paddingRight: 16,
  paddingTop: 2,
  paddingBottom: 2,
  borderTopRightRadius: 4,
  borderTop: 'solid thin lightgray',
  borderRight: 'solid thin lightgray'
};

class HoveringURL extends React.Component {
  render() {
    return (
      <div style={style}>
        {this.props.targetURL}
      </div>
    );
  }
}

HoveringURL.propTypes = {
  targetURL: React.PropTypes.string
};

module.exports = HoveringURL;

Improve visility of hevering URL
Improve visility of hevering URL

- Add top and bottom padding
- Add border lines
- Truncate long URL using ellipsis
