Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tadast/css_tt
Dead simple pure CSS based tooltips for Rails
https://github.com/tadast/css_tt
Last synced: 11 days ago
JSON representation
Dead simple pure CSS based tooltips for Rails
- Host: GitHub
- URL: https://github.com/tadast/css_tt
- Owner: tadast
- License: mit
- Created: 2010-06-20T10:07:40.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2010-06-20T12:25:48.000Z (over 14 years ago)
- Last Synced: 2024-11-14T18:44:33.590Z (about 1 month ago)
- Language: Ruby
- Homepage: http://github.com/medwezys/css_tt
- Size: 164 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.rdoc
- License: MIT-LICENSE
Awesome Lists containing this project
README
= CssTt
CssTt provides a simple way for creating pure css based tooltips. It was inspired by Alexander Dawson post http://sixrevisions.com/css/css-only-tooltips/ and some Alex Hall improvements http://www.devseo.co.uk/examples/pure-css-tooltips/, so I just wraped that up to a simple Rails plugin.
Works with Rails v2.3, haven't tested it on Rails 3 yet.== Installation
(sudo) gem install css_tt
Then
script/generate css_tt
which will generate css files and copy icon images to your public dir.You will also need to add css to any layout header you will use css_tt in.
<%= stylesheet_link_tag 'css_tt' %>
or
<%= stylesheet_link_tag 'application', 'your_css_files', 'css_tt', :cache => 'cached_css' %>
and add
config.gem "css_tt"
in your environment.rb file== Example
css_tt() helper method returns a html markup which with help of css makes tooltips for given string
Use helper in your views e.g.:
<%= css_tt("I am text to be explained on hover", "I am the text in tooltip") %>
This will generate a classic popupSome options are available for tooltips, like :type, :transition and :title
- :type => possible options are :classic, :critical, :help, :warning an :info. Type defines the look of the tooltip and if other than classic adds an icon. Types are quite self explainable
- :transition => works only for webkit based browsers (i.e. Chrome, Safari), but is unobtrusive and does nothing on other browsers, because it's css based
- :title => tootip title, optionalYou can use tooltips for whatever inline html element you want and add any
inline elements inside the tooltip.
<%= css_tt(link_to(smth, path),
"find more #{link_to('here', path)}",
:type => :info,
:title => "Outside link",
:transition => :left) %>
How do these look like http://www.devseo.co.uk/examples/pure-css-tooltips/
== FutureIn the future I expect to add more optional tooltip styles to css_tt
== TODO
* Tutorial-like demo page
* Option to add css file link tag to layout file while generating
* Add more fancy stuff== Collaboration
If you are a good designer, have some css styles for tooltips and want them in this gem, pm me http://github.com/medwezys.
Keep in mind that the structure of tooltip styles should be similar i.e. types - classic, info, warning, critical, help and so on. These are defined using css classes. More info in Alexander Dawson post http://sixrevisions.com/css/css-only-tooltips/Copyright (c) 2010 Tadas Tamosauskas, Alexander Dawson, Alex Hall.
Released under the MIT license