Comments (13)
I have the same problem. Screenshot for reference.
from hint.css.
@renatomartins if you issue is same @Vikom, you could do this:
To the :before
elements of hint--top
& hint--bottom
give a negative margin of 6px
.
.hint--top:before, .hit--bottom:before {
margin-left: -6px;
}
This will center the arrows on the element width. Though tooltips won't be centered as thats lil tricky and is still a question.
from hint.css.
Without using an additional element instead of ::before, ::after
, there is only one decent way of doing this: http://codepen.io/thejameskyle/pen/fzjwy
Even there it breaks in several different places.
I think the best way to handle this would to be to use javascript to modify the existing tooltips, putting them into an additional element. Leaving the current css as is by default.
from hint.css.
I believe this should do it:
.hint--top:after{
transform: translateX(-50%);
}
(add necessary browser prefixes)
from hint.css.
I took @robertimes example a little further, this works pretty well for me:
// center hints
.#{$prefix}top, .#{$prefix}bottom {
&, &:hover, &:focus {
&:after, &:before {
transform: translate(-50%, 8px);
margin-left: 0;
}
}
}
from hint.css.
@stevelacey solution works like a charm. +1 !
from hint.css.
@ahfeel I just noticed that my left/right tooltips do a little slide out transition whilst my top/bottom ones don't, presumably because of my fix... it doesn't bother me, I'd rather have them centred, but an inconsistency worth noting.
from hint.css.
from hint.css.
Working on this as part of #94
from hint.css.
This is now default behavior of the library from v2.0 :)
from hint.css.
@chinchang now* ?
from hint.css.
@stevelacey fixed the typo. Thanks...that was a dangerous one :P
from hint.css.
😄👌
from hint.css.
Related Issues (20)
- [suggestion] manual trigger class HOT 2
- <button> in a <td> with IE11 HOT 1
- no arrow showing up and bouncing on show / hide
- question/feature_request(enhancement): tooltip on click HOT 1
- Features suggestion HOT 2
- Web Maker Link Broken on the Hint CSS landing page HOT 8
- NPM installs version with non-MIT license HOT 3
- add hint--fit support
- Tooltip inside element to prevent page growth/cropping?
- Tooltip will be covered In Bootstrap Panel
- How can you make the tool tip always on top of every element and not clip? HOT 2
- install dependencies Fail
- I can't get it to look outside the container HOT 1
- width: max-content and max-width implementation HOT 1
- Overreliance on Specific Z-Index:
- Transition Property Usage: HOT 1
- Vendor Prefixes
- Accessibility Concerns
- Consider white-space : pre-line as a native part of hint--large HOT 2
- Feature : Add Color Option for Tooltips
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hint.css.