I have a CSS-only tooltip that uses a special element attribute to provide the content:
<li class="privTooltip" data-tooltip="My tooltip text">
Which is then handled in CSS:
<style>
[data-tooltip]:after {
content: attr(data-tooltip);
...styling...
}
</style>
But this only supports raw text. If I try to provide any HTML tags, like data-tooltip="<b>Granted through role paths</b>...more stuff", they aren't interpreted:
Text decoration, maybe a simple HTML table, etc.. would make these a lot nicer. I know I can write a DOM-based tooltip that does just about anything, but I'd like to know if it's possible with this lighter-weight pseudo-element CSS-only method.
This solution doesn't use your exact method, but it is CSS-only, which it sounds like is the important part for your use-case. You could try something like this, which allows you to style the tooltip's content with CSS.
EDIT: here's a live version of this in CodePen
HTML
<div class="tooltip">
<!-- put the content you want to hover over here -->
<img style="width: 40px; padding: 16px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/1200px-Infobox_info_icon.svg.png">
<span class="tooltiptext">
<!-- put the tooltip here -->
<strong>Title 1:</strong> Lorem ipsum.<br><br>
<strong>Title 2:</strong> Lorem ipsum.<br><br>
<strong>Title 3:</strong> Lorem ipsum.<br><br>
<strong>Title 4:</strong> Lorem ipsum.
</span>
</div>
CSS
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #fff;
color: #000;
text-align: left;
border-radius: 4px;
border: 1px solid #d0d0d0;
padding: 8px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
I am creating the nav bar for my website and I want to make a hover state so when you mouse over either the home, work, or contact tag a star appears. Is this possible to add via code or do I need to convert this text to an image to do so. See images for what I created in XD.
navigation with star hover
plan navigation with out star hover
Yeah you can do this pretty easily with CSS like this:
.star {
visibility: hidden;
}
.items:hover .star{
visibility: visible;
}
<div class="items"><span class="star">★</span>hello world</div>
Here is an example with an image used.
.star {
visibility: hidden;
max-width: 20px;
max-height: 20px;
}
.items:hover .star{
visibility: visible;
}
<div class="items">
<img Class="star" src="https://www.mariowiki.com/images/thumb/8/8a/New_Super_Mario_Bros._U_Deluxe_Super_Star.png/1200px-New_Super_Mario_Bros._U_Deluxe_Super_Star.png"/>hello world</div>
elementInQuestion.addEventListener("mouseenter",function(event){
elementInQuestion.innerHTML = "☆" + elementInQuestion.innerHTML;
}, false);
elementInQuestion.addEventListener("mouseleave",function(event){
elementInQuestion.innerHTML = elementInQuestion.innerHTML.slice(1);
}, false);
Just change "elementInQuestion" with your element. You can even make a function to assign the event listeners to each of your nav buttons.
There is a JAVASCRIPT solution which is more efficient.
<html>
<head>
<title>
star appear
</title>
<style type="text/css">
#stardiv
{
height: 16px;
width: 25px;
}
</style>
</head>
<div style="opacity:0;" id="stardiv">☆</div><div onmouseout="document.getElementById('stardiv').style.opacity= '0';" onmouseover="document.getElementById('stardiv').style.opacity= '1';">HOVER ME</div>
</html>
JSFIDDLE:https://jsfiddle.net/Lhobpwq9/
I wanted to make this linkable image to have a text in a pop up box (not the type of pop up that is on w3schools, I want a classic yellowish box) when I mouseover. I tried to do it like this
<div class="folder1">
<a href="yourlinkhere" target="_self" >
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
title="This is some text I want to display." </a>
</div>
Opening the page in the link works great but there is no pop up box when I hover on it. Any help?
Currently, you are setting the title attribute to get a tooltip type hint when the element is hovered over. If this is what you are looking to do but perhaps just style the textbox to be, say, yellow, I would suggest using the following:
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>
The above code was provided by Peeyush Kushwaha in this post. Simply change the anchor tag to your image tag, and apply styles as you see fit.
If by 'popup' you are looking for an alert to the user that requires interaction to close, you can use window.alert('text') in javascript in conjunction with the onmouseover event handler.
<img src="some_image.png" height="46px" width="57px" onmouseover="window.alert('Some Message')"/>
Otherwise, if you are looking for another element to be displayed upon mouseover of the image, you can use a bit of javascript to display a div or paragraph (really anything) upon mouseover of the img.
function showDiv() {
document.getElementById('popupBox').style.display = 'block';
}
#popupBox {
display: none;
}
<img src="some_image.png" width="41px" height="57px" onmouseover="showDiv()"/>
<div id="popupBox">Some Popup Text</div>
You can do this simply with CSS, or you can use one of many simple 'tooltip' JavaScript options. Bootstrap for example has this tooltip functionality built-in, ready to use. If you want something basic, here's a simple CSS-only approach that you can customise to your needs:
<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->
<div class="folder1" style="padding: 200px;">
<a href="yourlinkhere" target="_self" class="popper">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
<span class="pop-up">This is some text I want to display.</span>
</a>
</div>
<style>
a.popper {
display: inline-block;
position: relative;
}
.pop-up {
display: none;
position: absolute;
left: 0;
bottom: 100%;
padding: 1rem 1.5rem;
background: yellow;
color: black;
}
a.popper:hover .pop-up,
a.popper:focus .pop-up {
display: block;
}
</style>
Basically, you position the a tag relatively so that it can have absolutely positioned children, then relying on a:hover you show / hide the child using the child element's display property.
You can equally try this using css pseudo-element
a{
position: relative;
}
a:hover:after{
display:block;
content: "This is some text I want to display";
width: 200px;
background: yellow;
position: absolute;
top:0;
padding: 20px;
}
<div class="folder1" style="margin: 70px">
<a href="yourlinkhere" target="_self" class="">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>
</div>
This question already has answers here:
How to change the style of the title attribute inside an anchor tag?
(10 answers)
Closed 9 months ago.
I want to make a custom CSS class for tooltip which will wrap a string of length more than 25-30.Usually such a long text doesn't fit into the tootltip text area.
And is there anyway to do this using Tooltip (ui.bootstrap.tooltip) ?
Like using custom CSS class to get the desired output.
This is the simple css tooltip - Plunker DEMO
Here is the code Snippet for the same :
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
max-width:100px;
padding:15px;
min-height:30px;
background:#fff;
visibility: hidden;
border: 1px solid black;
color: #000;
text-align: center;
border-radius: 6px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me 1
<span class="tooltiptext">Tooltip text</span>
</div>
<div class="tooltip">Hover over me 2
<span class="tooltiptext">Array [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,,1,11,1,1,1,11,1,,1,1,1,1,1,1,1,1,1,1,1,1,1,1]</span>
</div>
</body>
The CSS Solution
There is a very simple solution to the problem at hand. What I essentially added is the following CSS code
word-wrap:break-word;
to the class that surrounds your tooltip text.
Here is a working demo
Also, this is a good read
What if I am using Angular UI?
For styling a tooltip from angular ui, I added tooltip-class="tooltip" to the tooltip code.
Here is a working demo with angular
This is a modified plunkr obtained from the Angular UI documentation
Here is complete code of custom tooltip in bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("[data-toggle=tooltip]").tooltip();
});
</script>
<style>
.tooltip.top .tooltip-inner {
background-color:red;
}
.tooltip.top .tooltip-arrow {
border-top-color: red;
}
.tooltip.right .tooltip-inner {
background-color:blue;
}
.tooltip.right .tooltip-arrow {
border-right-color: blue;
}
.tooltip.bottom .tooltip-inner {
background-color:green;
width:400px;
height:50px;
padding-top:10px;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: green;
}
.tooltip.left .tooltip-inner {
background-color:yellow;
}
.tooltip.left .tooltip-arrow {
border-left-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Colored Tooltip</h1>
</div>
<div class="col-sm-3">
<h3>Top</h3>
Hover to see my tooltip
</div>
<div class="col-sm-3">
<h3>Right</h3>
Hover to see my tooltip
</div>
<div class="col-sm-3">
<h3>Bottom</h3>
Hover to see my tooltip
</div>
<div class="col-sm-3">
<h3>Left</h3>
Hover to see my tooltip
</div>
</div>
</div>
</body>
</html>
You can create a use some css tricks which will resize the tooltip according to content.
Here is some example with assumptions of width and height.
.tooltip{
max-width:100px;
padding:15px;
min-height:30px;
background:#000;/*change accordingly*/
}
Above css will create a div with fix maximum width and resizeable height which will fit you content.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
max-width:100px;
padding:15px;
min-height:30px;
background:red;
visibility: hidden;
border: 1px solid black;
color: #000;
text-align: center;
border-radius: 6px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me 1
<span class="tooltiptext">Tooltip text</span>
</div>
<div class="tooltip">Hover over me 2
<span class="tooltiptext">Array [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,,1,11,1,1,1,11,1,,1,1,1,1,1,1,1,1,1,1,1,1,1,1]</span>
</div>
</body>
How do I make an image change to text when hovered, and back again when the mouse leaves using HTML, CSS and JavaScript? I am currently using HTML5UP's Aerial theme if that makes any difference.
You should be able to do this with just css:
#logo-holder {position:relative; width:992px; height:125px; /*dimensions of image*/}
#logo-holder .image,
#logo-holder .text {transition: opacity 0.5s ease-in-out;}
#logo-holder .text {position:absolute; top:0; left:0; opacity:0;}
#logo-holder:hover .image {opacity:0;}
#logo-holder:hover .text {opacity:1;}
<div id="logo-holder">
<img src="http://spydar007.com/images/logo.png" class="image" />
<div class="text">Show this text on hover</div>
</div>
I've just created a quick and dirty solution, and I have no idea if it is actually what you are looking for, you were extremely vague.
http://codepen.io/alexmccabe/pen/WvOdRw
Essentially, the text is always there but hidden using opacity: 0 and visibility: hidden. This allows us to do a nice transition to get the text to appear.
Biggest plus point, no JS used at all.
Use the below code it really helpful
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 hover text animate in div</title>
<style>
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1.2em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -4em;
}
</style>
</head>
<body>
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
Hover Here
</span>
<span>
<a href="http://sanwebcorner.com"><img src="http://3.bp.blogspot.com/-ZFCnUdrABLc/VlMOOwRCNeI/AAAAAAAAA9g/O5-y5ySNyLc/s1600-r/Copy%2Bof%2Bsan-02%2Bcopy.png" style=" height: 35px;
margin-top: 15px;"></a>
</span>
</div>
<h2>www.sanwebcorner.com</h2>
</body>
</html>
Here is the reference