I think it’s better to namespace your code and use OCSS. like this:

<span class="simptip simptip--position-top simptip--half-arrow"></span>

this way, it’s easier to read and you wont have any conflicts with other styles and scripts.

Hello there!

Is it possible to place a link inside the tooltip, like

<span class="simptip-position-right simptip-movable simptip-multiline simptip-info" data-tooltip="To view this file you need the free Adobe Acrobat Reader. Click to open.">

Greetings from Germany!

reduced redundancy for [data-tooltip]:hover,:focus area

decreased selector specificity for .simptip-movable. Moved code into /** features **/ area

New silent classes to reduce class declarations in scss file.

convert diverse color hex values to variables and add them to variables section

Added new Customize CSS Output to turn on / off tooltip features and styling to reduce the amount of compiled CSS without having to actually delete any code.

removed duplicate declaration of position:absolute from [data-tooltip]:before

remove excess vendor prefixes from mixins, and recycle transition mixin into fade mixin.

delete extra whitespace & convert sass only sections to sass comments so they don't compile in the unminified CSS.

Hi Arash,

Thank you very much for this clean solution (no js is a big plus for me).

I've been trying to add a tooltip to an input text (instead of placeholder), but it looks like it doesn't work (Fx 22), despite the :focus rules in the code. Im using multiline mode.

According to that snippet:

   [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
      visibility: visible;
      opacity: 1;
    }

I think it should at least show up.

Have you got any idea/suggestion what i could be doing wrong? (I tested on div/span and tooltips are working perfectly).

Regards, Paweł

GitHub changed the way Markdown headings are parsed, so this change fixes it.

See bryant1410/readmesfix for more information.

Tackles bryant1410/readmesfix#1

Arash jan, Would you please add simptip NuGet package. It's really useful for Microsoft software developers. You can find a less than a hour solution to build and deploy NuGet package in here http://docs.nuget.org/docs/creating-packages/using-a-gui-to-build-packages

Thank you ;-)

When used simptip-multiline -- simptip-position-left:after or simptip-position-right:after -- margin-bottom should be 0.

http://cl.ly/image/0i401a1z3u2U with mb0 http://cl.ly/image/0Q1L3r471J0x

Hey, maintainer(s) of arashmanteghi/simptip!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library arashmanteghi/simptip is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "arashmanteghi/simptip",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo, twitter: @versioneye email: [email protected] VersionEye - no more legacy software!

Hey arash,

I'm trying to get manual line breaks working for the multiline option, but it just doesn't work out. I've tried all the recommendations from

http://stackoverflow.com/questions/3340802/add-line-break-within-tooltips and http://stackoverflow.com/questions/6502054/web-tooltip-universally-accepted-linebreak-character

but to no avail. You wouldn't happen to know how to add a manual line break for multiline tooltips, would you?

Would recommend removing the filter blur declarations for the @if $multiline == true rules as the performance hit on the the iPad affects the rendering of the text inside the tooltip.

Also, can't really any other reason as to why it's there anyway unless I've missed something?

the tooltip plugin does not work when use on input textbox but on a or span tag is trust

<input type="text" class="simptip-position-top" data-tooltip="Hello">

var arr = new Array(); $("*").each(function(){ arr = $(this).attr("title"); if($(this).attr("title") !== undefined){ var t = $(this).attr("title"); $(this).addClass('ttt').removeAttr("title").attr('data-title',t); } });

and tt not show Oo, your css is on the page.