tooltipview.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /**
  2. * @license Copyright (c) 2003-2017, 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 Template from '../template';
  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.template = new Template( {
  50. tag: 'span',
  51. attributes: {
  52. class: [
  53. 'ck-tooltip',
  54. bind.to( 'position', position => 'ck-tooltip_' + position )
  55. ]
  56. },
  57. children: [
  58. {
  59. tag: 'span',
  60. attributes: {
  61. class: [
  62. 'ck-tooltip__text'
  63. ]
  64. },
  65. children: [
  66. {
  67. text: bind.to( 'text' ),
  68. }
  69. ]
  70. }
  71. ]
  72. } );
  73. }
  74. }