popover.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /*=========================================================================================
  2. File Name: popover.js
  3. Description: Popovers are an updated version, which don’t rely on images,
  4. use CSS3 for animations, and data-attributes for local title storage.
  5. ----------------------------------------------------------------------------------------
  6. Item Name: Robust - Responsive Admin Theme
  7. Version: 1.2
  8. Author: PIXINVENT
  9. Author URL: http://www.themeforest.net/user/pixinvent
  10. ==========================================================================================*/
  11. (function(window, document, $) {
  12. 'use strict';
  13. $('[data-toggle="popover"]').popover();
  14. /******************/
  15. // Popover events //
  16. /******************/
  17. // onShow event
  18. $('#show-popover').popover({
  19. title: 'Popover Show Event',
  20. content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
  21. trigger: 'click',
  22. placement: 'right'
  23. }).on('show.bs.popover', function() {
  24. alert('Show event fired.');
  25. });
  26. // onShown event
  27. $('#shown-popover').popover({
  28. title: 'Popover Shown Event',
  29. content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
  30. trigger: 'click',
  31. placement: 'bottom'
  32. }).on('shown.bs.popover', function() {
  33. alert('Shown event fired.');
  34. });
  35. // onHide event
  36. $('#hide-popover').popover({
  37. title: 'Popover Hide Event',
  38. content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
  39. trigger: 'click',
  40. placement: 'bottom'
  41. }).on('hide.bs.popover', function() {
  42. alert('Hide event fired.');
  43. });
  44. // onHidden event
  45. $('#hidden-popover').popover({
  46. title: 'Popover Hidden Event',
  47. content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
  48. trigger: 'click',
  49. placement: 'left'
  50. }).on('hidden.bs.popover', function() {
  51. alert('Hidden event fired.');
  52. });
  53. /*******************/
  54. // Tooltip methods //
  55. /*******************/
  56. // Show method
  57. $('#show-method').on('click', function() {
  58. $(this).popover('show');
  59. });
  60. // Hide method
  61. $('#hide-method').on('mouseenter', function() {
  62. $(this).popover('show');
  63. });
  64. $('#hide-method').on('click', function() {
  65. $(this).popover('hide');
  66. });
  67. // Toggle method
  68. $('#toggle-method').on('click', function() {
  69. $(this).popover('toggle');
  70. });
  71. // Dispose method
  72. $('#dispose').on('click', function() {
  73. $('#dispose-method').popover('dispose');
  74. });
  75. /* Trigger*/
  76. $('.manual').on('click', function() {
  77. $(this).popover('show');
  78. });
  79. $('.manual').on('mouseout', function() {
  80. $(this).popover('hide');
  81. });
  82. /****************/
  83. // Custom color //
  84. /****************/
  85. $('[data-popup=popover-color]').popover({
  86. template: '<div class="popover"><div class="bg-teal"><div class="popover-arrow"></div><div class="popover-inner"></div></div></div>'
  87. });
  88. /**********************/
  89. // Custom borer color //
  90. /**********************/
  91. $('[data-popup=popover-border]').popover({
  92. template: '<div class="popover"><div class="border-orange"><div class="popover-arrow"></div><div class="popover-inner"></div></div></div>'
  93. });
  94. })(window, document, jQuery);