In the following code, I want a tool-tip to come up when the user hovers the span, how do I do that? I don't want to use any links.
<span> text </span>
Here's the simple, built-in way:
<span title="My tip">text</span>
That gives you plain text tooltips. If you want rich tooltips, with formatted HTML in them, you'll need to use a library to do that. Fortunately there are loads of those.
Custom Tooltips with pure CSS - no JavaScript needed:
Example here (with code) / Full screen example
As an alternative to the default title attribute tooltips, you can make your own custom CSS tooltips using :before/:after pseudo elements and HTML5 data-* attributes.
Using the provided CSS, you can add a tooltip to an element using the data-tooltip attribute.
You can also control the position of the custom tooltip using the data-tooltip-position attribute (accepted values: top/right/bottom/left).
For instance, the following will add a tooltop positioned at the bottom of the span element.
<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>
How does this work?
You can display the custom tooltips with pseudo elements by retrieving the custom attribute values using the attr() function.
[data-tooltip]:before {
content: attr(data-tooltip);
}
In terms of positioning the tooltip, just use the attribute selector and change the placement based on the attribute's value.
Example here (with code) / Full screen example
Full CSS used in the example - customize this to your needs.
[data-tooltip] {
display: inline-block;
position: relative;
cursor: help;
padding: 4px;
}
/* Tooltip styling */
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: absolute;
background: #000;
color: #fff;
padding: 4px 8px;
font-size: 14px;
line-height: 1.4;
min-width: 100px;
text-align: center;
border-radius: 4px;
}
/* Dynamic horizontal centering */
[data-tooltip-position="top"]:before,
[data-tooltip-position="bottom"]:before {
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Dynamic vertical centering */
[data-tooltip-position="right"]:before,
[data-tooltip-position="left"]:before {
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[data-tooltip-position="top"]:before {
bottom: 100%;
margin-bottom: 6px;
}
[data-tooltip-position="right"]:before {
left: 100%;
margin-left: 6px;
}
[data-tooltip-position="bottom"]:before {
top: 100%;
margin-top: 6px;
}
[data-tooltip-position="left"]:before {
right: 100%;
margin-right: 6px;
}
/* Tooltip arrow styling/placement */
[data-tooltip]:after {
content: '';
display: none;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
left: 50%;
margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
[data-tooltip-position="right"]:after,
[data-tooltip-position="left"]:after {
top: 50%;
margin-top: -6px;
}
[data-tooltip-position="top"]:after {
bottom: 100%;
border-width: 6px 6px 0;
border-top-color: #000;
}
[data-tooltip-position="right"]:after {
left: 100%;
border-width: 6px 6px 6px 0;
border-right-color: #000;
}
[data-tooltip-position="bottom"]:after {
top: 100%;
border-width: 0 6px 6px;
border-bottom-color: #000;
}
[data-tooltip-position="left"]:after {
right: 100%;
border-width: 6px 0 6px 6px;
border-left-color: #000;
}
/* Show the tooltip when hovering */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
display: block;
z-index: 50;
}
In most browsers, the title attribute will render as a tooltip, and is generally flexible as to what sorts of elements it'll work with.
<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
stackoverflow.com
<img src="something.png" alt="Something" title="Something">
All of those will render tooltips in most every browser.
For the basic tooltip, you want:
<span title="This is my tooltip"> Hover on me to see tooltip! </span>
The title attribute will be used as the text for tooltip by the browser. If you want to apply style to it, consider using some libraries, e.g. jQuery UI.
Related
Objective: I am trying to create a tooltip where if you hover over a text a tooltip should appear. Basically, I would like to recreate this example at w3schools. Here is the link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip.
My Code:
render() {
return (
<div >
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class = "tooltip">
Hover over me
// <img src = "assets/images/react.png" alt="React / React Native" className = "icons"></img>
<span class = "tooltiptext">
Tooltip text
</span>
</div>
</div>
);
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip, .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: relative;
right: 100px;
z-index: 1;
/* bottom: 125%; */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip, .tooltiptext::after {
content: "";
position: absolute;
/* top: 100%; */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover, .tooltiptext {
visibility: visible;
opacity: 1;
}
side-note: I'm aware I commented out some positioning styles in the CSS so it is easier to find. Also, I would prefer to hover over a tech icon and have it display its name, but first I thought it would be better to start simple.
Outcome: The "Hover Over me" text and tooltip do not display; it appears white so you can't see it. However, If I hover over the tooltip text, both elements display. I can figure out the position of these elements through developer tools. Also, the tooltip does not display properly.
It looks like you are using the wrong CSS selectors. You want to use .tooltip .tooltiptext instead of .tooltip, .tooltiptext (no comma) and similar for the other rules. The first one selects elements with the class .tooltiptext that are descendants of .tooltip. The second one selects elements that have the class .tooltip or .tooltiptext.
Documentation
Checkboxes doesn't appear properly when using Chrome and zoom out to 75% or less. I'm also using AngularJS latest version. In FireFox and Internet Explorer they appear properly.
I tried to fix this problem with:
input[type=checkbox] {
-webkit-appearance:checkbox;
}
but this doesn't help.
Here how it looks like:
The checkboxes are custom and there is 1 span and inside 2 divs. Here is the code:
.ckeckmark {
display: inline-block;
width: 18px;
height: 18px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}`
.ckeckmark > .stem {
position: absolute;
width: 1px;
height: 11px;
background-color: #1C4A9E;
left: 8px;
top: 2px;
}
.ckeckmark > .kick {
position: absolute;
width: 5px;
height: 1px;
background-color: #1C4A9E;
left: 3px;
top: 12px;
}
<span ng-class="{ckeckmark: resident}">
<div class="stem"></div>
<div class="kick"></div>
</span>
.stem and .kick are 2 divs next to each other inside .checkmark span class.
After research i noticed that Google Chrome displays a web page OK at 100% zoom (and above) but when the zoom level is less than 100% (e.g. 90%) padding get changed. A moves from the right-hand-side of the screen to the left hand side.
Any help/suggestions?
So I popped this into a fiddle and I think I saw your problem. It took zooming out to 33% before the checkmark disappeared at jsfiddle as opposed to your 75%.
The solution I used was to use borders on the actual stem and kick instead of using a background on those elements.
.ckeckmark {
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid black;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.stem {
position: absolute;
width: 1px;
height: 11px;
border-left: 1px solid red;
left: 8px;
top: 2px;
}
.kick {
position: absolute;
width: 5px;
height: 7px;
border-top: 1px solid red;
left: 3px;
top: 12px;
}
I have not tested this in other browsers, but I zoomed out all the way to 25% and I still saw the checkmark.
Fiddle here: http://jsfiddle.net/Lvc0u55v/1658/
This question already has answers here:
Hover and click on CSS triangle
(4 answers)
Closed 7 years ago.
I am in quite the quandary! I would like to add cursor: pointer to my CSS, but the problem is it is a triangle. If I used the following:
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
The whole triangle and everything around it has the "Cursor" affect, how can I make only the triangle have the hover affect?
This can be done with pure CSS if we construct the triangle using transforms and overflow:hidden
FIDDLE
#triangleholder {
width: 100px;
height: 100px;
border: 1px solid red;
}
#triangle {
position: relative;
height: 50px;
overflow: hidden;
}
#triangle:before {
content: '';
position: absolute;
width: 71px; /*using pythagorus: sqrt( (100^2) /2 ) */
height: 71px;
background: blue;
transform: rotate(45deg)translateX(29%);
cursor: pointer;
}
<div id="triangleholder">
<div id="triangle">
</div>
</div>
NB: The code: translateX(29%) is used to place the rotated blue square back into the center of the container after it is rotated. This value seems to be constant even if we change the dimensions of the container (FIDDLE)
Use SVG or CSS3 to draw the arrow. Give that element cursor: pointer give the div wrapper non-cursor
Relevant article to implement this: http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/
You could mask the non-triangle areas with pseudo elements, with cursor: default set on them. You'd need to add overflow: hidden to the wrapping element to contain the masks, and of course it relies on the background being a flat colour and the shape you want to mask being a perfect triangle. Not massively extensible and a bit hacky, but it gets the specific result you're after.
#triangleholder {
// ..
overflow: hidden;
}
#triangle {
// ..
position: relative;
}
#triangle:before, #triangle:after {
content: "";
display: block;
position: absolute;
background: white;
width: 100px;
height: 50px;
top: -10px;
cursor: default;
}
#triangle:before {
transform: rotate(-45deg);
right: 0;
}
#triangle:after {
transform: rotate(45deg);
left: 0;
}
I having a small problem in getting the right character for my CSS content element. What I wanted is dots under my heading, 3 dots to be specific and so I have the following CSS:
.dotted-effect::before{
position: absolute;
top: 80%;
left: 50%;
content: '.';
font-size: 1.2em;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
color: #444;
text-shadow: 20px 0 #444, -20px 0 #444;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
The problem is in the way the CSS dot is displayed. Have a look at how it looks:
Notice how the dots look a bit squarish and tiny.
Now I'd like my dots to be circular and a bit bold: not ugly bold, but slightly bold.
I tried looking up Stack Overflow and a lot of people had the same problem:
This thread addresses my problem in a few ways. The problem is I am a bit specific about how I want my dots to be, and so I cannot settle for those tiny small dots. I also went through a lot of HTML ASCHII charts and none of them had what I was looking for.
What can I do next to achieve my goal?
How about background + border-radius?
http://jsfiddle.net/z7v6xk44/1/
<div class="dots"></div>
.dots, .dots:before, .dots:after {
width: 4px;
height: 4px;
background: black;
border-radius: 50%;
}
.dots{
margin: 0 auto;
position: relative;
display: inline-block;
}
.dots:before {
content: '';
position: absolute;
left: -10px;
}
.dots:after {
content: '';
position: absolute;
right: -10px;
}
i'm trying to style a radio button using just css, but i can't figure out why it does not work:
HTML
<input type="radio">
CSS
input[type="radio"]{
background: green;
}
http://jsfiddle.net/vNmLe/
Radio buttons, checkboxes and selects can't be styled very well in a cross-browser fashion using only CSS. You'll need some extra markup and a little javascript.
One technique is to wrap the input inside a div and set the input's opacity to 0. You position the input inside of the wrapping div so that it fills the entire space.
HTML:
<div class="faux-radio" data-group="radio-test">
<input type="radio" id="radio-1" name="radio-test">
</div>
CSS:
input[type="radio"] {
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
z-index: 5;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity: 0;
opacity: 0;
}
.faux-radio {
width: 12px;
height: 12px;
background: #f2f2f2;
border: 1px solid #a6a6a6;
border-radius: 12px;
display: inline-block;
margin-right: 2px;
position: relative;
}
.faux-radio.selected:after {
content: '';
width: 6px;
height: 6px;
background: #666;
border-radius: 6px;
position: absolute;
top: 2px;
left: 2px;
}
label {
margin-right: 20px;
}
With this technique you get your own style and still get all of the standard input behavior. But you have extra markup for every form element. And you'll need to add some javascript to provide the visual feedback users expect when clicking form elemens.
Here's a quick radio button example with js included: http://jsfiddle.net/xevw3/17/