chinchang / hint.css Goto Github PK
View Code? Open in Web Editor NEWA CSS only tooltip library for your lovely websites.
Home Page: https://kushagra.dev/lab/hint/
License: MIT License
A CSS only tooltip library for your lovely websites.
Home Page: https://kushagra.dev/lab/hint/
License: MIT License
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.
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.
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/
Issues in IE8:
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!
You mix Sass & Scss syntax in so many place...
Please replace +
by @include
.
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
I would like to display a hint when hovering on tr, on it's left, but it's breaking the table layout.
For any li
element, adding the data-hint
attribute removes the element's bullet. For example, see this jsfiddle.
Please, create this feature!
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
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 👍
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
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?
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.
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 :)
While 1000000
seems like a great number for tooltips, I think it'd be more appropriate in the variables. How about it?
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 is one improvment sugestion.
Why not write "hint-top" instead of "hint--top" ?
Is there a technical reason ?
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.
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 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've never seen CSS formatted like this, it seems kind of obnoxious. Any specific reasons why it's formatted the way it is?
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!
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)
The hint is not displayed on Chromium 27/Google Chrome 27.
На сайте http://motor-master.ru/nuke/modules.php?name=About_Firm
расширением noads почему то не блокируется внешний скрипт "code.jivosite.ru/script/widget/7281" и
с помощью ##$$jivosite не блокируется работа скрипта:
<script type="text/javascript">(function() {var widget_id = '7281';var s = document.createElement('script'); s.type = "text/javascript"; s.async = true; s.src = '//code.jivosite.ru/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss); })();</script>Opera 12.14
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?
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
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 !
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...
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.
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.
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
Please do not ignore Opera browser.
Transitions has long supported the prefix "-o-transition".
Transforms has long supported the prefix "-o-transform".
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.
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()
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">
<?xml version="1.0" encoding="utf-8" ?>
<book>
<page>1</page><nocode><a style="max-width:50px;" class="hint--top hint--always" data-hint="Tooltip text."></a></nocode>
<page>2</page>
<page>3</page><nocode><a style="max-width:50px;" class="hint--right hint--always" data-hint="Tooltip text."></a></nocode>
</book>
</code>
</pre>
</body>
</html>
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?
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.
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.