A passionate frontend developer from Nottinghamshire, UK.
Portfolio: jackdomleo.dev
A highly customisable, minimal, pure CSS tooltip library
Home Page: https://cooltipz.jackdomleo.dev
License: MIT License
A passionate frontend developer from Nottinghamshire, UK.
Portfolio: jackdomleo.dev
Is there a way to specify the default direction in css, so that for each definition of the tooltip in an html element (e.g. <div aria-label="...">...</div>
, it's not necessary to add data-cooltipz-dir="top"
)? The documentation only shows customization of other properties such as color, but not the direction.
Will be good, if [aria-label] selector ignoring empty attributes like this: [aria-label]:not([aria-label]="")
Now i have to use crutch:
[aria-label=""]::before, [aria-label=""]::after {
display: none;
}
These are useful for whenever anyone wants to contribute to this project.
Thank you!
when using in element with scale :
&:hover {
transform: scale(1.2);
&:active {
transform: scale(1);
}
}
style is broken (background color, font width)
Hello,
I'd like to suggest a feature. When the border radius of the tip is high, the arrow leaves a gap:
The feature is the ability to translate this arrow.
--cooltipz-arrow-side-offset: 5px;
Called it "side" because it should be none when it is centered.
In my case it would be:
right: calc(var(--cooltipz-arrow-size, .3125rem)/2 + var(--cooltipz-arrow-side-offset));
Thanks for your work ๐
Is there anyway to get a newline into a tooltip?
I'm really loving the speed of css3 tooltips over the likes of tippyjs that I would normally use (Though I still need to use something like tippy or bootstraps tooltips if I want HTML in a tooltip), but for a lot of the basic stuff, this library works perfectly.
However, for some reason, I can't get 
to work.
In a regular 'title' attribute, I can do something like
title="test
test2"
and the tooltip when it shows will have 'test2' on the line below 'test'.
Now is hardcoded. Have to use crutch:
[aria-label][data-cooltipz-dir]::after, [aria-label][class*=cooltipz]::after {
font-family: $font-family-base;
}
Currently, the documentation website source code is sitting in the gh-pages branch. I want to change this so it sits in a docs/ directory in the master branch, then automatically deploy to the gh-pages branch. I also want to utilise Nuxt 3 rather than raw HTML, CSS & JS.
have this in html
<div class="custom--tooltip scrollBtn up noprint" data-cooltipz-dir="top" aria-label="Go to top" onclick="scrollToTop()" ><i style="" class="fa fa-chevron-up"></i></div>
it makes div disappear
when I remove data-cooltipz-dir="top" the html displays but foesn't show tooltip
i succesfully used in another app with no problems
Can;t figure out
Issue and pull request templates are good for ensuring the most information is provided when raising issues or pull requests.
It would be good to install an SCSS linter such as Stylelint so we can standardise code.
This is important to ensure consistency across SCSS code patterns
I feel a small migration guide on how to convert from v1 to v2 is needed. Could we make use of GitHub Wikis for this?
Will be epic good, if can be use not aria-label attribute for content. I want use title attribute, for SEO reasons.
Cooltipz.css version: 2.0.0
When trying to override the Sass variables with a custom setting, it errors saying the variables don't exist in the module.
Overriding the Sass variables will render the customised value.
Overriding the Sass variables causes an error.
Customisation is a big USP of Cooltipz.css, so good to get this resolved sooner rather than later.
Cooltipz.css version: Latest
When building with a framework such as Nuxt, the opacity is changed from 100%
to 1%
Should render as 100%
or as 1
.
Renders as 1%
Because otherwise it doesn't show for various frameworks such as Nuxt
It would be useful to add some kind of automated testing so developers using this package are assured. And so we have confidence when publishing a new version.
Some investigation is first needed into the best tool. Below are some requirements needed:
A workflow is good for automating tasks, it is also good for helping check the validity of new pull requests.
build
job
publish
job
build
Sass should be added as an optional peer dependency. It is optional because if the developer decides to import the .css
file, then they don't necessarily need it. But if they want to import the .scss
file, then ideally they need Sass installed to do so.
Sass are deprecating the @import
at-rule in the distant future, so it'd be good if we could plan to update to use the recommended @use
at-rule instead.
Convert all @import
rules to a @use
rule and more specifically add a index file into each directory of partials/mixins/etc and then use a single @use "some-dir" as *
(without a namespace) rule to load in the entire directory in the main Sass file which gets compiled. Loading using @use
and index files (with @forward
in the index files) allows us to load all of a directories content (partials, vars, mixins, functions etc) with a single @use
rule which is super nice.
Hi,
I love this library that allows to customizable how I handle my tooltips.
But it seems that the "aria-label" can't contains html code like <br />
nor \n
to indicate a new line in the tooltip.
Is that something that can be done ?
Thanks
Cooltipz.css version: 2.0.0
Since v2.0.0, the below comment that should appear at the start of the stylesheet, now appears in the middle:
/*! Cooltipz.css v2.0.0 | MIT License | github.com/jackdomleo7/Cooltipz.css */
Important copyright comment appears at the very start of the stylesheet
Important copyright comment appears somewhere in the middle of the stylesheet
It's important to have the copyright at the beginning so it is easily visible.
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.