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>
Related
I have tried for hours to get this to work trying multiple solved stack solutions and none have worked.
I am assuming I am either missing something or I have my divs/spans incorrect. Any help would be greatly appreciated. Currently my text is very small and bg color is grey and slightly transparent.
Also if it is possible to make the "info" icon smaller that would be great as well. Thank you!
.mainContainer {
width: 40%;
float: left;
}
.info {
display: flex;
}
.info .span {
align-self: center;
}
.info-button{
padding: 0;
border: none;
background: none;
outline: none;
background-color: transparent;
top:-10px;
}
<div class="mainContainer">
<h3>Main Title</h3>
<div class="info">
<h5>Title</h5><span class="info-span">
<button mat-icon-button class="info-button" #tooltip="matTooltip" matTooltip="Tooltip Text">
<mat-icon color="basic" >info</mat-icon>
</button>
</span>
</div>
</div>
Try this
::ng-deep .mat-tooltip {
background-color: transparent;
font-size: 12px;
}
You can set !important if not working.
Hope useful
You can use popper js to integrate and style tooltips it's easy and simple :
this is a quick exemple from the documentation :
<!DOCTYPE html>
<title>Popper example</title>
<style>
#tooltip {
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
</style>
<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>
or visit the official website to learn about popper js :Tutorial
I need to show an edit icon next to the text (inline), when user hovers mouse over it. When i hover over the text, the edit icon is falling in the next line.
My span is taking up the 100% of div width, even though i have set it to 80% width and the rest 20% width is reserved for the right side icon.
Span style is,
span{
display: inline-block;max-width:80%;width:80%;
}
It looks like,
How can i display the icon inline, at the right end in the same line as the text?
Plunker code is here.
You can do like this.
$('document').ready(function(){
console.log('document ready callback fn is invoked')
$('.menu-body').hide()
})
$('body').on('click', '.drp-down-btn', function(){
$('.menu-body').toggle()
})
.cntr{
width: 20%;
overflow: hidden;
white-space: nowrap;
display: block;
}
.cntr i {
visibility: hidden;
opacity: 0;
transition: all 0.4s;
-webkit-transition: all 0.4s;
cursor: pointer;
}
<!-- .cntr:hover{
border: solid black 1px;
} -->
.cntr:hover > i{
display: inline-block;
}
.cntr>span>p{
width: 15%;
overflow:hidden;
vertical-align:middle;
text-overflow: ellipsis;
white-space: nowrap;
}
.cntr span,.cntr p,.cntr i{
display: inline-block;
}
.cntr:hover i{
visibility: visible;
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="cntr">
<span>
<p>Hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<i class="fa fa-edit fa-lg" style="padding-left:5px;border-left: solid black 1px;">
</i>
</span>
</div>
<script src="script.js"></script>
</body>
span is inline element by default and you cannot add width to it unless you display it as block.
<div>
<span style="display:inline-block; width:80%;">Hello Hello Hello</span>
<i style="display:inline-block; padding-left:5px;float: right; border-left: solid black 1px; width: 15%;">ICON</i>
</div>
I have following html code but the TasksCount class does not show up as hyperlink. Any idea? I updated the anchor with the wording Link but still no good.
<div id="TaskNotification" style="display: inline!important; float: left; border; 3px solid #8AC007;PADDING: 5px;">
<img id="NotificatioImg" class="n-img" "="" src="../SiteAssets/tasks_sm.png?rev=23" alt="Notification">
<div class="TasksCount">
Link
</div>
</div>
Here is the CSS
<style>
body {
font-family:Calibri;
}
#customTaskNotification {
position:relative;
}
.TasksCount {
position:absolute;
top: -.1px;
right:-.1px;
padding:1px 2px 1px 2px;
background-color:#ff0000; /* orange #ef8913* dark-pink #d06079 */
color:white;
font-weight:bold;
font-size:1.05em;
width:50%;
text-align: center;
border-radius:50%!important;
box-shadow:1px 1px 1px gray;
}
div.TasksCount:empty {
display: none;
}
</style>
Here is the jQuery that populates TasksCount Div
<script type="text/javascript" language="javascript" src="_layouts/15/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var rowCount = $(".ms-WPBody tr").not(":has(th)").length;
var x = $('.ms-WPBody tr td a').html();
if(x.indexOf("There are no items") !== -1){
rowCount = "";
}
$(".rowCount").text(rowCount);
$(".TasksCount").text(rowCount);
});
</script>
<div id="TaskNotification" style="display: inline!important; float: left; border; 3px solid #8AC007;PADDING: 5px;">
<img id="NotificatioImg" class="n-img" "=" src="../SiteAssets/tasks_sm.png?rev=23" alt="Notification">
<div class="TasksCount">
Link
</div>
</div>
The anchor tag has no text. Just put in some text.
Not what you are looking for? Let me know :)
Because you populate TaskCount overwriting the link? - try
$(".TaskCount>a").text(rowCount)
instead
<img class="n-img" "="" src="../SiteAssets/tasks_sm.png?rev=23" alt="Notification">
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
I am using the tooltip. But I want that on image tag, like when I mouseover the image then the tooltip should work. I have tried but not working for me on image tag.
You can use the standard HTML title attribute of image for this:
<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>
I am set Tooltips On My Working Project That Is 100% Working
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.size_of_img{
width:90px}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip"><img class="size_of_img" src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg" alt="Image 1" /><span class="tooltiptext">grewon.pdf</span></div>
<p>Note that the position of the tooltip text isn't very good. Check More Position GO</p>
</body>
</html>
Using javascript, you can set tooltips for all the images on the page.
<!DOCTYPE html>
<html>
<body>
<img src="http://sushmareddy.byethost7.com/dist/img/buffet.png" alt="Food">
<img src="http://sushmareddy.byethost7.com/dist/img/uthappizza.png" alt="Pizza">
<script>
//image objects
var imageEls = document.getElementsByTagName("img");
//Iterating
for(var i=0;i<imageEls.length;i++){
imageEls[i].title=imageEls[i].alt;
//OR
//imageEls[i].title="Title of your choice";
}
</script>
</body>
</html>
You can use the following format to generate a tooltip for an image.
<div class="tooltip"><img src="joe.jpg" />
<span class="tooltiptext">Tooltip text</span>
</div>