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. /**
  10. * The tooltip view class.
  11. *
  12. * @extends module:ui/view~View
  13. */
  14. export default class TooltipView extends View {
  15. /**
  16. * @inheritDoc
  17. */
  18. constructor( locale ) {
  19. super( locale );
  20. /**
  21. * The text of the tooltip visible to the user.
  22. *
  23. * @observable
  24. * @member {String} #text
  25. */
  26. this.set( 'text', '' );
  27. /**
  28. * The position of the tooltip (south or north).
  29. *
  30. * +-----------+
  31. * | north |
  32. * +-----------+
  33. * V
  34. * [element]
  35. *
  36. * [element]
  37. * ^
  38. * +-----------+
  39. * | south |
  40. * +-----------+
  41. *
  42. * @observable
  43. * @default 's'
  44. * @member {'s'|'n'} #position
  45. */
  46. this.set( 'position', 's' );
  47. const bind = this.bindTemplate;
  48. this.setTemplate( {
  49. tag: 'span',
  50. attributes: {
  51. class: [
  52. 'ck-tooltip',
  53. bind.to( 'position', position => 'ck-tooltip_' + position ),
  54. bind.if( 'text', 'ck-hidden', value => !value.trim() )
  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. }