chinchang / hint.css Goto Github PK

I would like to display hint messages on invalid form fields, especially on inputs. However, hovering over a form element doesn't show the hint tooltip. This behaviour is cross-browser (IE10, Chrome 29, FF 24).

Wrapping an input in another element and adding data-hint attribute on the parent works for Chrome & FF, causes trouble in IE10 (sometimes it is shown, sometimes it isn't).

JsFiddle:
http://jsfiddle.net/maros_urbanec/8v4y7/

I'm not sure it's possible but it would be nice if HTML tags could be used inside the data-hint attribute. (mostly just for the odd line break)
According to the contributors on the page below, it should be possible?
http://stackoverflow.com/questions/4699276/can-data-attribute-contain-html-tags

Greetings,
Manuel

Hello,

Is it possible to have an unordered list (UL) inside the tooltip?

And have being able to move the mouse over the tooltip without making it disappear?

Basically, I would also like to use the tooltip as a popup menu.

Thank You,
Miguel

Please, create this feature!

I would like to display a hint when hovering on tr, on it's left, but it's breaking the table layout.

If a tooltip is set on an item near the edge of the screen (say the right edge), and hint--right is also set, the draws itself off the edge of the screen:

Ideally the tooltip would position itself on the opposite side, or adjust its width.

My page uses a darkgrey background and these tooltips are barely visible. The page frame itself is black and white only, no colour is used outside the actual content. I'd like to use a lighter grey colour for the tooltips and black text on them. But the hint.css file is too complex to edit. What override CSS code do I need to add custom colours, or could this be added/prepared by the library?

Have something like jQuery builder which developers can use to get a customized version of Hint.css. May be an option to select desired modules also.

Helping hands are welcome :)

I was testing my application to see how is the compatibility with IE and it seems like in IE10, the data-hint container element appears if you hover over it (while it supposed to be hidden).

While 1000000 seems like a great number for tooltips, I think it'd be more appropriate in the variables. How about it?

It would be cool if you could have a variables file where I could change things like font-size or text colors from my main.scss file. Just a thought. Thanks for the tooltips 👍

I'm looking for a way to add more than a single line (forced) to a tooltip.

Anyone have any ideas on how to do this? (html does NOT work!)

I've tried

<pre></pre>
<br />
\r\n

Also, I'm trying to execute basic html (links) within a tooltip; any ideas on how to accomplish this?

Probably a class called hint--rounded.

Suggested by @parisk in #10

I have an appliaction where I have some disabled items at some points. There is no reason to show these tooltips since there is no action attached to the items they reference. Is it possible to attach a class to the tooltip to make it invisible?
eg;

into

Since "display: none" removes the entire container I am implementing a hack to alter your library's behavior. Ideally I would like to leave your implementation alone.

Issues in IE8:

• Always visible
• Wrongly positioned

I have seen this: #27 and this: #19 and I thought when I have an control like textarea or an input field, I can click on it and it will appear and when I set the focus to an other element, the same but no it only works onhover the element. I nee a feature for the input element itself so I can click on it, the hint will appear and I click out and it should disappear. Is this possible?

Regards

Chris

https://github.com/chinchang/hint.css/blob/master/src/hint-core.scss#L55

should be z-index: $zIndex + 1, if $z-index is set larger than 1000001 this element will be displayed incorrectly

Hello. I'm wondering if there is a way to set a maximum width on tooltips. When a tooltip is very long, the text does not break onto lines, and the tooltip extends off the page.

Thanks!

In Firefox, the text changes its appearance during the moving transform. At first it's normal, but when the target position has been reached, the text looks thin and has colour fringes. After a short moment, it reverts to a good rendering automatically. This is disturbing and looks strange. It does not happen in Chrome, other browsers untested. Windows 7. Also visible on your website, but not a strong as on mine.

Could I disable this transform by another CSS class or something? I don't think it is actually necessary, given that it doesn't work well.

Showing the tooltip on focus is causing problems in IE since, after clicking an element (such as a div), it seems to retain focus until one clicks elsewhere and therefore the tooltip does not disappear until that is done.

I'm thinking about what is the best way to solve this. Is the tooltip only being shown on focus because of input fields? If so, perhaps the best would be to add the :focus selector only to those fields. If this seems good, I can make a pull request.

hint.css :
Line 12 :

• Demo: http://kushagragour.in/labs/hint/

error no "S" in "lab

I tried to prepare some code on CodePen:
http://codepen.io/anon/pen/hoDFb

Sorry for the mess in code.

You can hover over "2NT" on right table to display hint.
As you can see layout is broken, and hint is displayed far after declared content width.

While running "npm install", the fetching for the required node modules stops at "grunt-sass" since the "package.json" has

"grunt-sass": "[email protected]"

in devDependencies.
The @ sign seems to make the version unmatched, since there does exist 0.2.5.
Once removed, the command runs successfully.

I'm not sure if this is possible, but it'd be nice to show/hide the hover programatically with javascript. Something along the lines of

$(".data-hint-class').show()/.hide()

The hint is not displayed on Chromium 27/Google Chrome 27.

I'm using a modified Hint.css v1.3 for my own project.
Maybe you will be interested with this code :
Use Edit for the HTML version.

Three things:
1 )tip : tooltip in two colors
2) notif : side of the screen tip
3) notif-top : top of the screen tip

Hi,

Firstly what a great piece of CSS, thankyou for working on it!

Now to the problem I am having, For some reason I can get it to work nicely in Chrome and Firefox, however when I test in IE10 in the project I am working on, it only displays when I click on it. I created a JSFiddle to try eliminate anything that could be disrupting it. My JSFiddle located here: http://jsfiddle.net/ugf3F/9/ Does not appear to show anything on hover in IE10 (But still works in CH/FF). Am I missing something obvious or is it not doing what it should?

I am trying to compile this on a freshly-cloned copy and I get an error:

$ sass src/hint.scss:hint.css
Syntax error: Invalid CSS after "...ow-border-color": expected "{", was "($defaultColor,..."
        on line 65 of /Users/jmvidal/hint.css/src/hint-position.scss
        from line 25 of src/hint.scss
  Use --trace for backtrace.

Sass does not seem to like those variable names. I am using the latest:

$ sass -version
Sass 3.2.5 (Media Mark)

I am new to sass so I am probably doing something wrong or missing some library. Help!

I'd like to center the arrow in the tooltip. Anyone can make this work? I tried playing around with percentages but since the length of the text is dynamic I couldn't manage... Is this possible?
Centering the tooltip would also be nice.
Any ideas?

This tool is quit simple and effective at the same time , easy to use, BUT it doesn't support Arabic language 👎 maybe it's my problem in setting up the HTML document but I don't thing so ,, whole characters appear like boxes as if it trying to use a font that doesn't support Arabic language.

thanks for our efforts I 👍

I am using hint.css in combination with prettify http://code.google.com/p/google-code-prettify/

On Chrome/Safari the tooltips look normal, on Firefox, the combination with prettify.js yields strange results - the arrow is mangled or does not appear and the second/third letter of the tooltip are only semi-visible.

toy example code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="run_prettify.js"></script>
<link rel="stylesheet" href="hint.css"></link>
</head>
<body>
    <pre class="prettyprint" style="border:0px">
        <code class="language-xml">
 &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
 &lt;book&gt;
    &lt;page&gt;1&lt;/page&gt;<nocode><a style="max-width:50px;" class="hint--top hint--always" data-hint="Tooltip text."></a></nocode>
    &lt;page&gt;2&lt;/page&gt;
    &lt;page&gt;3&lt;/page&gt;<nocode><a style="max-width:50px;" class="hint--right hint--always" data-hint="Tooltip text."></a></nocode> 
&lt;/book&gt;
        </code>
    </pre>
</body>
</html>

The hint looks awesome. I can't seem to find a way or instruction to add new line on the hint. Is there a way to add new line in this version?

Thank you.

Example

If you have two buttons, one on top of the other, and they both have tooltips, the button below will appear in front of the tooltip for the button above.

If you remove the tooltip from the button below, the tooltip above works fine as you'd expect.

Not sure what can be done here other than manually specifying z-indexes for each tooltip.

http://gruntjs.com/getting-started says:
"This file was named grunt.js for 0.3.x versions of Grunt."

However the current dependency is 0.4.0, thus the request for changing the name.

As a side note, while calling in Windows and in command prompt, issuing the command "grunt" opens the grunt.js in my default editor...

While appearing, hint has somewhat like opacity even though I turned it off and after animation finishes, it appear to work properly again.
I tried turning off all the transforms and transitions, played with opacity and visibility, but nothing helped. The interval between it's being half-transparent and non-transparent is like 0.5s or something.
It's a table, btw.

For any li element, adding the data-hint attribute removes the element's bullet. For example, see this jsfiddle.

Please do not ignore Opera browser.
Transitions has long supported the prefix "-o-transition".
Transforms has long supported the prefix "-o-transform".

Is it possible to have html inside a hint that will be rendered?

I am wanting to have an unordered list inside a hint but the tags are not rendered when the hint shows up. Is there any possibility of making this work?

Here is a screenshot of the list not being rendered:

This is for a custom bb code engine i have written, i want 'BB Code Tags' that are invalid to show the reason why they could not be rendered to assist the user in creating quality posts. The list of reasons is shown as a list inside of the hint tooltip.

This is one improvment sugestion.
Why not write "hint-top" instead of "hint--top" ?

Is there a technical reason ?

You mix Sass & Scss syntax in so many place...
Please replace + by @include.

I've never seen CSS formatted like this, it seems kind of obnoxious. Any specific reasons why it's formatted the way it is?

Whenever you activate a "hinted" element by hovering it, the webkit-scrollbar-track-piece turns black and then back to normal.
You can see a live example of what I mean here (all the link in the top nav bar use hint.css).

Edit: Note that it seems like the issue is related the css3 transition added in to the popup. By removing it, the issue disappears.

Here is an example of what I mean: http://codepen.io/adonisk/pen/eKAIF
You can also see it at http://codemagic.gr , pressing the buttons on the topbar (HTML, CSS, JS, Console etc) will reproduce the issue.

tested it in Chrome v32, Firefox Nightly 28.0a1 and Epiphany (latest)

class="hint--x" is still the only way to achieve tool tip placement.

It may not be required, but unless there is some other way to specify the location of the tool tip, calling it is deprecated is incorrect.

На сайте http://motor-master.ru/nuke/modules.php?name=About_Firm
расширением noads почему то не блокируется внешний скрипт "code.jivosite.ru/script/widget/7281" и

с помощью ##$$jivosite не блокируется работа скрипта:

Opera 12.14

following issue #24

with 1.3.x version 
 and \u000A do not work, to have breaking line.
Help me please to have new line in hint working again !

Hi,

I try to use hint.css on Chrome width the -webkit-column-count on the contenair.
All is good for the first column but for the others the tooltip don't find the real position of his parent. Sample here:

http://jsfiddle.net/OrelP/S5rUV/

Have you got an solution to fix it?

Thanks,

OrelP