8
0

tooltipview.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module ui/tooltip/tooltipview
  7. */
  8. import View from '../view';
  9. import '../../theme/components/tooltip/tooltip.css';
  10. /**
  11. * The tooltip view class.
  12. *
  13. * @extends module:ui/view~View
  14. */
  15. export default class TooltipView extends View {
  16. /**
  17. * @inheritDoc
  18. */
  19. constructor( locale ) {
  20. super( locale );
  21. /**
  22. * The text of the tooltip visible to the user.
  23. *
  24. * @observable
  25. * @member {String} #text
  26. */
  27. this.set( 'text', '' );
  28. /**
  29. * The position of the tooltip (south or north).
  30. *
  31. * +-----------+
  32. * | north |
  33. * +-----------+
  34. * V
  35. * [element]
  36. *
  37. * [element]
  38. * ^
  39. * +-----------+
  40. * | south |
  41. * +-----------+
  42. *
  43. * @observable
  44. * @default 's'
  45. * @member {'s'|'n'} #position
  46. */
  47. this.set( 'position', 's' );
  48. const bind = this.bindTemplate;
  49. this.setTemplate( {
  50. tag: 'span',
  51. attributes: {
  52. class: [
  53. 'ck-tooltip',
  54. bind.to( 'position', position => 'ck-tooltip_' + position ),
  55. bind.if( 'text', 'ck-hidden', value => !value.trim() )
  56. ]
  57. },
  58. children: [
  59. {
  60. tag: 'span',
  61. attributes: {
  62. class: [
  63. 'ck-tooltip__text'
  64. ]
  65. },
  66. children: [
  67. {
  68. text: bind.to( 'text' ),
  69. }
  70. ]
  71. }
  72. ]
  73. } );
  74. }
  75. }