I am trying to get css used for hover tooltip by using inspect element in google chrome developer tool.Tooltip appears when I hover on edit pencil Icon. as soon as I move the mouse to inspect the tooltip it disappears. so I am unable to inspect that tooltip.
<span>
<span class="fa fa-pencil fa-1x" title="Edit" data-toggle="tooltip"></span>
</span>
It's not a custom Javascript or CSS tooltip plugin. It's a default tooltip by the OS system or the browser, using title attribute to display it, so you can't get or set it style.
By the way, you can use #Anie solution to use your own tooltip. Now you can easily set a custom style for your tooltip.
Use the console instead of element inspector.
In the console, write:
document.getElementsByClassName("fa fa-pencil fa-1x");
The console will show you all elements with this class, and when you click the result, the element will focus so you can see it's style.
This is exactly what you want to see.
instead you want to create please copy this code.
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the
hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
Please see https://www.w3schools.com/css/css_tooltip.asp
An element's position ('relative' here) provides positioning context for generated content. And an element has its own title-attribute which provides text of a styled and positioned pseudo element. Note the tabindex which allows focus for the element (hover is not the only way to interact with content) and the disabling of interaction with the pseudo/generated element. Adjust as desired.
<style>
.container{position:relative;}
[data-toggle="tooltip"]:active:before,
[data-toggle="tooltip"]:hover:before,
[data-toggle="tooltip"]:focus:before
{content:attr(title);border:1px solid black;background:#eee;color:black;position:absolute;top:-100%;padding:0.1em 0.3em;font-size:smaller;z-index:11;pointer-events:none;white-space:nowrap;}
</style>
<span class=container>...<span tabindex="0" class="fa fa-pencil fa-1x" title="Edit" data-toggle="tooltip">tooltip</span>...</span>
Related
I have a toggle button on my page that is created by my document generation system. The generated HTML is
toggle text
On the page, this is rendered with the toggleIcon (>) on the left and the toggle text immediately to the right. It looks like this
> toggle text
I need to use CSS so that toggle icon is on the right so it looks like this
toggle text >
I tried to do
.toggler {
float:right;
}
but this put the icon on the left and overlapping (in z) of the toggle text (using Windows 10 Chrome)
I can't change the HTML, I have a class on the but not on the toggle text - how can I do this?
Thanks
Since you cannot control HTML...
Make your <a> relative and add padding as the space for the icon
Make your <img> absolute and move it to the right
a {
display: inline-block;
position: relative;
padding-right: 30px; /* make space for the toggle icon */
outline: 1px solid red; /* just to see what we'rer doing */
}
a img.toggler {
position: absolute;
right: 0;
}
<img src="//placehold.it/18x18/0bf" class="toggler"> toggle text
needless to say, you should use a parent class for the above styles, otherwise you'll end up changing every a element on the page.
I'm trying to make a custom tooltip implementation in CSS, which is working pretty decently, but I'm running into a problem. Currently, hovering over the tooltip still keeps the tooltip opened, even though I'm not hovering over the original element itself.
Of course I've tried something like ::before:hover {display:none;}, but that doesn't work because pseudo-elements don't get pseudo-classes applied to them.
My next thought was to simply make the tooltip not "take up" any space. Using negative margin-bottom allows other stuff to take up space in an element as if the element is not there. However, the :hover pseudo-class apparently still applies then.
Here's a demo of what I'd like to do. I'd like to have the tooltip of the following demo not persist any hovering state. Note that moving the tooltip-text higher above the element is not a working solution, because moving the cursor upwards faster than a snail's pace will cause some pixels to be skipped, which means the tooltip 'catches' the cursor and persists the :hover on the element.
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
top: -2px;
transform: translateY(-100%);
background: white;
border: 1px solid black;
}
<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>
As you can see, if you move your cursor over the div, the tooltip will appear, and if you slowly move your cursor up, the tooltip will disappear. If you move your cursor upwards slightly faster, however, it'll skip the 1-pixel gap, and keep the cursor hovering over the div.
Now I'm looking for some styles to apply to [data-tooltip]::before so that the cursor's hover events are not triggered on it (or at least, not at the location you see the tooltip; if I can hide it somewhere at [-1000, -1000] that's fine as well)
So basically, my question is, is it possible to apply css to an element so that :hover does not apply to (part of) an element? I'd love to hear ideas or suggestions.
Not sure if that's what you're looking for, but regarding the first question (red div, blue on hover), you could shorten the divs height and use border-bottom for making up for the lost height:
div {
width: 100px;
height: 50px; /* instead of 100px */
background: red;
margin-bottom: -50px;
position: relative;
z-index: 1;
border-bottom: 50px solid red; /* adds 50px to divs apparent height, but ignored at hover */
}
After looking around the internet for a while I finally found a solution that works flawlessly. I didn't really know about this before, but apparently there's a pointer-events style that does exactly what I want. Its accepted values outside of SVG are auto and none, but luckily the latter prevents all hover-events from triggering on the ::before pseudo-element.
Here's a demo:
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
/*** this style prevents persistence of the tooltip when hovering over it ***/
pointer-events: none;
/* the rest is just the styles used in the question */
content: attr(data-tooltip);
position: absolute;
top: 0; /* changed from -2px to 0 so the effect is more clearly shown */
transform: translateY(-100%);
background: white;
border: 1px solid black;
}
<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>
When I hover on the "message" part of the button, the hover animation works, but when i hover over the icon, the hover animation doesn't happen and this makes it a poor button.
Here's the HTML
<div>
<i className="profile-user-button-message-icon">message</i>
<button className="button-icon-message ">Message</button>
</div>
Hope this information is enough to understand my problem, comment below if you need more information, thanks!
It's React code, hence the "className".
CSS Code for icon
.profile-user-button-message-icon{
position:absolute;
left:0px;
top:20px;
}
Fiddle
you can write button:before {content: ''; display: inline-block; width: 10px; height: 10px; background: url('your bg-image');}
I have to work with HTML files where the following tooltip is extensively used:
<div class="tooltip">
Text
<span class="popup">
Tooltip
</span>
</div>
And the CSS:
.tooltip span[class="popup"] {
z-index:10;display:none; padding:7px 10px;
}
.tooltip:hover span[class="popup"]{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;
}
https://jsfiddle.net/f1tztx15/2/
My problem is that the tooltip not only appears when I hover over "Text" but also when I hover over the blank space at the right of "Text" (see below).
Tooltip appearing when blank space is hovered
Is there a way to limit the "hoverable" region to the text without changing the whole tooltip? (I don't really have the freedom to do that)
Thanks!
Try using CSS to limit the width or padding of the element.
Eg.
.tooltip:
width: 100%;
padding: 0px;
This could limit the width of your tooltip element.
You could also just use a <span> element. Which would also contain the element within its own bounds.
I'm feeling quite frustrated after finding out that the bootstrap button class seems to break the hover function in standard CSS.
I didn't really want to use tooltips, so I decided to try making my own grey box appear next to my button to display why it's disabled on hover. Here's my code:
HTML
<a class="btn btn-danger disabled" disabled="disabled" href="" id="statement-delete" onclick="return false;">Delete
<span id="delete-info"></span>
</a>
CSS
#statement-delete:hover #delete-info {
display: block;
}
#delete-info {
display: none;
background: #C8C8C8;
margin-left: 0px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
}
I thought I surely must be doing something wrong until I used a JSFiddle, and it magically worked (before adding the Bootstrap reference). However, as soon as I added the reference to the Bootstrap, no hover...
Here's the fiddle: http://jsfiddle.net/ga82Lbm5/1/
If you remove the reference to bootstrap at the left, you'll see that it works.
Is it possible to use the Hover function over a Bootstrap button? Or will I have to resort to using some custom jQuery to do this?
Bootstrap adds the rule pointer-events:none to your code for disabled elements to prevent the hover from working. You can undo this by reverting the change with:
a.btn.disabled {
pointer-events: auto;
}
jsFiddle example
I'd suggest you remove the property disabled="disabled" since you want the hover function. Logically, if you think about it, the element must be "enabled" for the hover to work. Similarly, you could also remove the CSS class disabled class for the same reason.
The thing is Bootstrap adds the property pointer-events: none; to the class disabled. The definition of this property (borrowed from Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)) is :
The CSS property pointer-events allows authors to control under what
circumstances (if any) a particular graphic element can become the
target of mouse events.
You solution really is to nullify the effects of this property.Thus, removing the aforementioned properties, this works. See below :
#statement-delete:hover #delete-info {
display: block;
}
#delete-info {
display: none;
background: #C8C8C8;
margin-left: 0px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
top: 48px;
left: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-danger" href="" id="statement-delete" onclick="return false;">Delete<span id="delete-info"></span></a>