Add toolTipButton

app/assets/javascripts/application.js

@@ -11,9 +11,15 @@
 // about supported directives.
 //
 //= require rails-ujs
+//= require jquery
+//= require jquery_ujs
 //= require turbolinks
 //= require jquery3
 //= require popper
 //= require bootstrap-sprockets
 //= require cocoon
 //= require_tree .
+
+document.addEventListener("turbolinks:load", function() {
+  $('.tag-tooltip').tooltip();
+});

app/assets/stylesheets/application.scss

@@ -15,6 +15,7 @@
  */
 
 @import "bootstrap";
+@import "bootstrap-sprockets";
 @import url('https://fonts.googleapis.com/css?family=Raleway:400,700|Zilla+Slab:400,600i,700');
 
 

app/javascript/bundles/UI/components/ToolTipButton/ToolTipButton.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+var placement = ['top', 'right', 'bottom', 'left'];
+var buttonType = ['primary', 'error', 'warning', 'success', 'disabled'];
+
+const ToolTipButton = ({ buttonType, placement, text, children, block, transparent, ...rest }) => {
+  const classes = classnames('button','tag-tooltip', {
+    'button-primary': buttonType === 'primary',
+    'button-success': buttonType === 'success',
+    'button-warning': buttonType === 'warning',
+    'button-error': buttonType === 'error',
+    'button-disabled': buttonType === 'disabled',
+    'button-block': block,
+    'button-transparent': transparent
+  });
+
+  return (
+     <button
+     {...rest} 
+     className={classes} 
+     data-toggle="tooltip" 
+     data-placement={placement}
+     title={text}>
+      {children}
+    </button>
+  );
+};
+
+export default ToolTipButton;
+
+ToolTipButton.propTypes = {
+  placement: PropTypes.oneOf(placement).isRequired,
+  text: PropTypes.string.isRequired,
+  buttonType: PropTypes.oneOf(buttonType).isRequired
+};

app/javascript/packs/ui-bundle.js

@@ -10,6 +10,7 @@ import TextArea from '../bundles/UI/components/TextArea/TextArea';
 import Avatar from '../bundles/UI/components/Avatar/Avatar';
 import ProgressBar from '../bundles/UI/components/ProgressBar/ProgressBar';
 import Sidebar from '../bundles/UI/components/Sidebar/Sidebar';
+import ToolTipButton from '../bundles/UI/components/ToolTipButton/ToolTipButton';
 
 // This is how react_on_rails can see the HelloWorld in the browser.
 ReactOnRails.register({
@@ -23,6 +24,13 @@ ReactOnRails.register({
   TextArea,
   Avatar,
   Sidebar,
-  ProgressBar
+  ProgressBar,
+  ToolTipButton
 });
-export { Input, Picture, Alert, Button, Card, Switch, TextArea, Avatar, Sidebar, ProgressBar };
+
+export { 
+  Input, Picture, Alert, Button, 
+  Card, Switch, TextArea, Avatar, 
+  Sidebar, ProgressBar, ToolTipButton,
+  Modal,
+ };

app/javascript/stories/ui/toolTipButton.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { Button } from '../../packs/ui-bundle';
+import { ToolTipButton } from '../../packs/ui-bundle';
+
+const button = <Button type="primary">Next</Button>;
+
+storiesOf('ToolTip', module)
+  .add('Top', () => <ToolTipButton buttonType="primary"  placement="top" text="Top Tooltip">TOP</ToolTipButton>)
+  .add('Right', () => <ToolTipButton buttonType="primary" placement="right" text="Right Tooltip">RIGHT</ToolTipButton>)
+  .add('Bottom', () =><ToolTipButton buttonType="primary" placement="bottom" text="Bottom Tooltip">BOTTOM</ToolTipButton>)
+  .add('Left', () => <ToolTipButton buttonType="primary" placement="left" text="Left Tooltip">LEFT</ToolTipButton>)
+  ;