You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Tooltip.js 1.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /*
  2. * @Author: Caven
  3. * @Date: 2020-02-01 12:07:54
  4. * @Last Modified by: Caven
  5. * @Last Modified time: 2020-05-11 23:34:58
  6. */
  7. import { DomUtil } from '../utils'
  8. import State from '../state/State'
  9. import Widget from './Widget'
  10. class Tooltip extends Widget {
  11. constructor() {
  12. super()
  13. this._wrapper = DomUtil.create('div', 'dc-tool-tip')
  14. this.type = Widget.getWidgetType('tooltip')
  15. this._state = State.INITIALIZED
  16. }
  17. /**
  18. *
  19. * @param {*} windowCoord
  20. *
  21. */
  22. _updateWindowCoord(windowCoord) {
  23. let x = windowCoord.x + 10
  24. let y = windowCoord.y - this._wrapper.offsetHeight / 2
  25. this._wrapper.style.cssText = `
  26. visibility:visible;
  27. z-index:1;
  28. transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
  29. `
  30. }
  31. /**
  32. *
  33. * @param {*} position
  34. * @param {*} content
  35. *
  36. */
  37. showAt(position, content) {
  38. if (position) {
  39. this._updateWindowCoord(position)
  40. }
  41. this.setContent(content)
  42. return this
  43. }
  44. }
  45. Widget.registerType('tooltip')
  46. export default Tooltip