AwesomeTooltip

Lightweight gem for loading tooltips on your page without preloading. With this gem you can load static template, or templates with data from the database.

Installation

Add this line to your applications' Gemfile:

gem 'awesome_tooltip'

And then execute:

$ bundle

Configuration

1. Mount AwesomeTooltip routes in to your config/routes.rb

   mount AwesomeTooltip::Engine => '/', as: 'awesome_tooltip'
   

2. Require AwesomeTooltip javascript in to your application.js. If you are using Rails 6 with webpack you must create app/assets/javascripts folder with application.js file and require javascript there.

   //= require awesome_tooltip/tooltip
   

3. Require AwesomeTooltip styles:

   /*
   *= require awesome_tooltip/tooltip
   */
   

4. Create a folder for you tooltip templates:

   $ mkdir app/awesome_tooltips
   

5. Add a template:

   $ echo '<h1>This is your tooltip with static template</h1>' > app/awesome_tooltips/template.html.erb
   

6. Add following code to your page:

   <div class="awesome_tooltip" data-template="template">Element with tooltip</div>
   

Usage

For example, if you want a tooltip with some external info for a user, you can create a tooltip template with the following info in app/awesome_tooltips/user_info.html.erb folder:

<div class="user-info">
  <div class="user-fullname">
    <%= @user.full_name %>
  </div>
  <div class="email">
    <%= @user.email %>
  </div>
</div>

Then add the following code to your page:

<div class="awesome_tooltip" data-template="user_info" data-object="#{@user.class.name.downcase}-#{@user.id}"><%= @user.full_name %></div>

Configuration

HTML attributes | Option | Description | Value example | Optional | |--------|-------------|---------------|----------| | data-template | Path to your template(root dir for template is app/awesome_tooltips) | project | false | | data-object | Model name and object id separated by dash | project-1 | true | | data-location | Tooltip location | bottom | true |

If you want to override default javascript configuration, you can add the following code to you js file:

AwesomeTooltip({
  tooltipPath: '/your/custom/path/',
  delay: 2000,
  location: 'bottom'
});

Option	Default value	Type
tooltipPath	/tooltip/	String
hideDelay	1500	Integer
location	top(also available bottom)	String

TODO:

• Add generators
• Add configs
• Add ability to place tooltip on the left and right side

Contributing

• Fork it
• Create your feature branch (git checkout -b my-new-feature)
• Commit your changes (git commit -am 'Added some feature')
• Push to the branch (git push origin my-new-feature)
• Create new Pull Request

License

The gem is available as open source under the terms of the MIT License.