I am trying to fix a CSS issue, there's and "i" icon image on which the hovering effect is placed. As the mouse moves over it the tool-tip should appear. But the problem is that tool-tip appears but its fixed on one place there are many "i" icons and as we hover on each due to the tool-tip being displayed in one place, hovering on some "i" images is useless as the tool-tip is not visible. These "i" images are placed in an iframe plus there are many "i" icons so scroll-bar appears so the more bottom of the iframe we reach the tool-tip is not available. Any suggestions and help? Only pure CSS no JS, jquery...says my boss.
The "i" image code:
<div class="sa_statusIn"> Reward Earned
<span id="sa_status8">
<img class="sa_status_tooltip" src="i_image_link.png" alt="help" value="help" width="15" height="15" border="0"><br> Claim Reward <span id="sa_tooltiptxt">Congrats! Another Company system is up & running and we have you to thank. Continue to earn rewards by sharing Company with more of your friends.</span></span>
Claim Reward <span id="sa_tooltiptxt">Congrats! Another Company system is up & running and we have you to thank. Continue to earn rewards by sharing Company with more of your friends.</span></span>
</div>
And here's the relevant CSS:
.sa_statusIn {
float: left;
width: 29%;
padding: 16px 0 0 24px;
color: #C25A59;
}
img.sa_status_tooltip {
width: 19px;
height: 18px;
position: relative;
top: 4px;
left: 5;
}
img.sa_status_tooltip {
width: 19px;
height: 18px;
position: relative;
top: 4px;
left: 5;
}
#sa_tooltiptxt {
display: none;
background: ffffcc;
margin-left: 145px;
margin-top: 0px;
padding: 3px 0px 9px 3px;
position: absolute;
z-index: 1000;
width: 115px;
height: 10px;
}
Regards.
Related
I have a list of links on the left hand side of the page.
I would like to improve this list so that when I put the cursor over an item in this list, some sort of label appears which gives a brief description about what the link is pointing to. The html in question is generated automatically using Antora from AsciiDoc sources and, as far as I can see, all I am able to do is to add a css class or id for the different parts of the link text which are in bold. I cannot add any Javascript or nested css classes.
So here is my attempt:
<!DOCTYPE html>
<html>
<head>
<style>
#Bob.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#Bob.tooltiptext {
font-size: 5px;
}
#Bob.tooltiptext:hover {
visibility: visible;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>
<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong>
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>
</body>
</html>
This does not achieve what I want obviously. All it does is have one bit of text in a small font that, when I roll over it, increases into a larger font in a kind of box.
If anyone can think of some way to have a label pop up over some link in a page, even using some completely different approach that I have not thought of, I would be grateful. Note that I will have about 200 links so if I can have a solution that does not require me to have a set of css properties for every different id for each link, that would be preferable.
If any of the this question is not clear, please feel free to ask me.
Simple tooltip can be achieved by usi title attribute: The information is shown as a tooltip text when the mouse moves over the element.
<a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong>
</a>
You can also make your own custom tooltip, by using content property to insert generated content. (description of each link).
.searchEngineLink {
display: inline;
position: relative;
}
.searchEngineLink:hover:after {
background: #eee;
border-radius: 5px;
bottom: -34px;
color: black;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
white-space:nowrap;
}
.searchEngineLink:hover:before {
border: solid;
border-color: #ddd transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 40%;
position: absolute;
z-index: 99;
}
<a class="searchEngineLink" gloss="What a great guy" href="http://www.bob.com">Bob</a>
<a class="searchEngineLink" gloss="What a smart guy" href="http://www.bob.com">Bob2</a>
<br>
<a class="searchEngineLink" gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>
I am creating content cards which need to be clickable. Clicking on these cards take you to the page where you can see the full content. Additionally, for some users, the cards also have links inside which go through different pages (like to edit or report). You can see the desired design here:
https://jsfiddle.net/4s8b5kb1/1/ (the card would go to more details page).
Looking through older questions, I came across methods that either make the card div clickable by adding an onClick handler or having a persistent 'View More' link. Ideally, I am want to just use plain CSS without wanting to add onClick handlers that do the job of links, and not have a persistent 'View More' button either.
I have also read of strategies where you create a link within a div and then using z-index you can let it act as the link for the entire div, and having other more specific links have higher z-index.
I have tried it but with not much luck. Here is the code so far: https://jsfiddle.net/4s8b5kb1/1/
Any ideas are much appreciated!
I put position: relative on edit class
.edit {
color: indianred;
font-size: 1rem;
z-index: 10;
position: relative;
}
You can check it here:
.parent {
display: flex;
justify-content:center;
align-items:center;
height: 100vh;
}
.card {
height: 200px;
width: 260px;
background: #FFF;
border: 1px solid #FAFAFA;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
border-radius: 20px;
overflow-y: auto;
padding: 2em;
font-family: Courier New;
font-size: 0.7rem;
cursor: pointer;
position: relative;
}
.card p {
z-index: 10;
}
.edit {
color: indianred;
font-size: 1rem;
z-index: 10;
position: relative;
}
.view {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0;
}
<div class ="parent">
<div class="card">
<a class="edit" href="#edit">EDIT</a>
<a class="edit" href="#edit">REPORT</a>
<p>
For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us. As
we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with
a finger it would crumble and fall apart. Seeing this has to change a man. When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it!
</p>
<a class = "view" href = "#view">View</a>
</div>
</div>
I am trying to find out what font is used in an SVG marker that's placed on a Google Maps surface. Specifically, 9 on a blue marker in this codepen.
The label is set with these properties:
label: {
text: "9",
color: "white",
fontWeight:"bold"
},
However, when I use either Chrome or Firefox to zero into the marker, I get the same font-weight regardless of what fontWeight property is set to.
Is there a way to do it?
What Google Maps does is downright sneaky. To prevent the number from being selected with the mouse, the SVG icon (that is the blue circle without the number) is drawn in a lower-lying layer, the number is positioned above, and then the icon is rendered again on top, but with opacity="0.01". If you try to select the marker with the developer tools, you end up in the higher layer and won't see the DOM node for the number at all.
The icon you select is in a layer with z-index:3. Two sibling elements earlier is a div with z-index:1 (Both have neither class nor id, so selecting in code is awkward). Inside that are the elements that hold the marker and the number 9:
<div style="width: 32px; height: 32px; overflow: hidden; position: absolute; left: -16px; top: -16px; z-index: 0;">
<img alt="" src="data:image/svg+xml;utf8,..." draggable="false" style="position: absolute; left: 0px; top: 0px; width: 32px; height: 32px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div style="height: 100px; margin-top: -50px; margin-left: -50%; display: table; border-spacing: 0px;">
<div style="display: table-cell; vertical-align: middle; white-space: nowrap; text-align: center;">
<div style="color: white; font-size: 14px; font-weight: bold; font-family: Roboto, Arial, sans-serif;">9</div>
</div>
</div>
</div>
The following selector will find the number (in the Codepen console, CORS prevents you from accessing it programatically from the browser console):
document.querySelector('div[style*="z-index: 103"] div[style*="display: table-cell"] > div')
I have a code like this
<div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel">1B 100E</span></div>
I also have CSS for pinlabel
.pinlabel{
display: none;
position: absolute;
background-color: #3774d5;
height: 16px;
width: 200px;
color: white;
top: 0px;
left: 1px;
font-size: 10px !important;
border-radius: 10px;
border: white 2px solid;}
.maptimize_marker_0:hover span.pinlabel {display:block;}
But I cant get the Hover state work. If to Force hover state in developer tool in chrome everything works fine, but not working when mouse is over... What am I doing wrong? Also I want to put span Under the div, but the span is always on top and covers the div background picture... Please help!
I'm not sure what your problem is, on http://jsfiddle.net/abrunet/Bb9T3/, I copy paste your code and the hover is working..
Last, your span does not have a z-index specified. You might chose one, lower than the divs one and an other higher for the hover case.
You should also try to separate your style in a different sheet to keep your code clean.
Let me know if I misunderstood your question.
I am currently working on my share buttons and I am trying to make them act like the share buttons on YouTube do, when a:hovered a span elemental appears with a text "Facebook/Twitter/RSS" etc.
The span element width should be auto since "Facebook" and "RSS" contains a different amount of letters, and I don't want to set a fixed width.
I want the span element to appear in the "middle" of it's current element, check the youtube share buttom for a hint.
I have come this far, see: http://jsfiddle.net/Kz2n2/
try this:
<span title="share">share</span>
css:
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 100%;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
working jsfiddle:
demo
With jQuery UI Tooltip you can make tooltips for your social icons.
Check out the following example, here is the jQuery UI Tooltip implemented.
$('.tooltip').tooltip();
The title tag on your <a href='#'>` is used as the text for your tooltip.
#<span>RSS.</span>