tooltip.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. /*=========================================================================================
  2. File Name: tooltip.js
  3. Description: Tooltips 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: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
  7. Author: Pixinvent
  8. Author URL: hhttp://www.themeforest.net/user/pixinvent
  9. ==========================================================================================*/
  10. (function(window, document, $) {
  11. 'use strict';
  12. /******************/
  13. // Tooltip events //
  14. /******************/
  15. // onShow event
  16. $('#show-tooltip').tooltip({
  17. title: 'Tooltip Show Event',
  18. trigger: 'click',
  19. placement: 'right'
  20. }).on('show.bs.tooltip', function() {
  21. alert('Show event fired.');
  22. });
  23. // onShown event
  24. $('#shown-tooltip').tooltip({
  25. title: 'Tooltip Shown Event',
  26. trigger: 'click',
  27. placement: 'top'
  28. }).on('shown.bs.tooltip', function() {
  29. alert('Shown event fired.');
  30. });
  31. // onHide event
  32. $('#hide-tooltip').tooltip({
  33. title: 'Tooltip Hide Event',
  34. trigger: 'click',
  35. placement: 'bottom'
  36. }).on('hide.bs.tooltip', function() {
  37. alert('Hide event fired.');
  38. });
  39. // onHidden event
  40. $('#hidden-tooltip').tooltip({
  41. title: 'Tooltip Hidden Event',
  42. trigger: 'click',
  43. placement: 'left'
  44. }).on('hidden.bs.tooltip', function() {
  45. alert('Hidden event fired.');
  46. });
  47. /*******************/
  48. // Tooltip methods //
  49. /*******************/
  50. // Show method
  51. $('#show-method').on('click', function() {
  52. $(this).tooltip('show');
  53. });
  54. // Hide method
  55. $('#hide-method').on('mouseenter', function() {
  56. $(this).tooltip('show');
  57. });
  58. $('#hide-method').on('click', function() {
  59. $(this).tooltip('hide');
  60. });
  61. // Toggle method
  62. $('#toggle-method').on('click', function() {
  63. $(this).tooltip('toggle');
  64. });
  65. // Dispose method
  66. $('#dispose').on('click', function() {
  67. $('#dispose-method').tooltip('dispose');
  68. });
  69. /* Trigger*/
  70. $('.manual').on('click', function() {
  71. $(this).tooltip('show');
  72. });
  73. $('.manual').on('mouseout', function() {
  74. $(this).tooltip('hide');
  75. });
  76. /* Default template */
  77. $(".template").on('click', function(){
  78. console.log(
  79. '<div class="tooltip" role="tooltip">' +
  80. '<div class="tooltip-arrow"></div>' +
  81. '<div class="tooltip-inner"></div>' +
  82. '</div>'
  83. );
  84. });
  85. })(window, document, jQuery);