tooltipview.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  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',
  54. 'ck-tooltip',
  55. bind.to( 'position', position => 'ck-tooltip_' + position ),
  56. bind.if( 'text', 'ck-hidden', value => !value.trim() )
  57. ]
  58. },
  59. children: [
  60. {
  61. tag: 'span',
  62. attributes: {
  63. class: [
  64. 'ck',
  65. 'ck-tooltip__text'
  66. ]
  67. },
  68. children: [
  69. {
  70. text: bind.to( 'text' ),
  71. }
  72. ]
  73. }
  74. ]
  75. } );
  76. }
  77. }