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.
Related
I have a page where I have a Wordpress plugin WPDATATABLES using HTML to display some information that I'm pulling from various sites (importXML). The idea is for the page to look something like this https://www.labelradar.com/labels/chillyourmind/profile, that when you over over a particular element, the entire element reacts and changes into a white logo with the main color of the social media icon. Currently, I am able to get all the CSS working except for one small detail, and that's the white icon. It only changes when you are within range of the image outline of the icon.
Here's the page: https://trapparty.net/theparty/
I know there must be someway to force the div to react at the same time when I hover on the outermost div element controlling the entire thing. Here's a pastbin of the entire CSS code I'm using:
https://www.pastiebin.com/5cf313feb2753
And below is one HTML element with the nested DIV elements.
I've tried combining some CSS like this to try and call the div on the outside:
.soundcloud.soundcloudicon .soundcloudwhite {
display: none;
position: absolute;
top: 0px;
left: 0;
z-index: 99;
}
<center><a href="https://www.instagram.com/thetrapparty/" target="_blank"><div class="instagram"><div class="instagramicon">
<center><img src="https://www.trapparty.net/wp-content/followicons/instagram.png" height="263" width="178" alt="instagram">
</center>
<center><img src="https://www.trapparty.net/wp-content/followicons/instagramwhite.png" height="263" width="178" class="instagramwhite" alt="instagramwhite"></center>
</div>
<div class="igcount"><h2><center><font color="white">47.4k</font></center></h2></div>
<div class="followerstextig">Followers</div></div></a></center>
The actual result I'd like can be seen in the Label Radar link above, but essentially, I want the white icon to show up whenever I hover over the entire outer div element.
Reading the title it would be something like:
div img {
border: 1px solid black;
}
div:hover img {
border: 1px solid red;
}
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>
I need an expand icon to go alongside a piece of dynamic text within a tab to show more info. The expand icon has a background image - so needs to be displayed as block - when clicked a class is applied which alters the background image to a minus and the text beneath the link is revealed.
Is there a way to display the icon 5px to the left of the dynamic text and for it still to be a block (so you can see the background images)?
My HTML is below - note that the tab also contains a tick box which has a seperate function.
<div class="expandLinkWO">Cardio & Arms<span class="plusCircle btn"><span></span> </span> <span class="tickBox"></span>
You could use inline-block, which does what you want. Or you could make your button floating. Both should work.
Inline-version
.plusCircle {
display:inline-block;
vertical-align: top;
margin-right: 5px;
}
Float-version:
.plusCircle {
display:block;
float:left;
margin-right: 5px;
}
I believe the inline-block way is nicer, but IE and inline-block ain't the best of friends..
You probably need inline-block :
.plusCircle {
background: url(your/img/url.jpg);
height: 20px;
width: 20px;
display: inline-block;
margin-left: 5px;
}
What is the best way to combine a border with some text like so:
----------- sometext ------------
| |
| form |
| |
---------------------------------
As it's for a form, you should use a fieldset element.
See: http://jsfiddle.net/thirtydot/AVGsr/
METHOD:
For use with anything even when not using the forms fieldset, you can use my method in this JSFiddle (It does NOT use Javascript, JSFiddle can be used for pure HTML & CSS), I will explain what it does in here:
What the fiddle demonstrates is having 3 divs as the top single border area, made up of 2 divs either side with a 1px border in the middle, and one on each side, and the middle div having text only, aligned to the center and padded as needed.
There is then a div placed underneath that which is the main content, but it only has 3 borders (left, right and bottom. The top has been made by the side div's).
The CSS and HTML is here, and JSFiddle link underneath.
FEATURES:
This method should fit all your criteria
Border text is in the place of part of the top border
Border text is central, can be placed anywhere along by modifying the CSS
Easy to change dimensions of the bordered area
CSS:
.wrapper-box { float:left; width:500px; height:150px; }
.side-border { float:left; height:24px; width:199px; border-top: solid black 1px; margin-top:25px; }
.side-border.l { float:left; border-left: solid black 1px; }
.side-border.r { float:left; border-right: solid black 1px; }
.border-text { float:left; height:35px; margin-top:15px; width:100px; text-align:center; }
.box-content { float:left; width:498px; height: 100px; border-left: solid black 1px; border-right: solid black 1px; border-bottom: solid black 1px; }
HTML:
<div class="wrapper-box">
<div class="side-border l"></div>
<div class="border-text">Border Text</div>
<div class="side-border r"></div>
<div class="box-content"></div>
</div>
EXTRA INFO:
To modify the CSS for longer text, just reduce the width of the border-text, and increase the width of the side-border.
JSFiddle Example Here
Hope this helps you out, I'll be keeping this for future reference myself :).
Define a division with border and put a heading in that division.
To make the heading overlap the top border, define a negative top-margin appropriately.
To make the line around the heading disappear define the background color of the heading same as the original background.
Here goes the code:
<div class="container" style="border: 1px solid black;">
<h4 style="margin-top:-1%; background: white;">Heading</h4>
</div>
Very similar to this discussion: How to center the <legend> element - what to use instead of align:center attribute?
As was said there, using the tag is a pain if you want consistent results across browsers. To achieve this effect, I'd use a <h> tag or <div> instead for the legend.
Here's a example: http://jsfiddle.net/CddE7/
Tested in Firefox, Chrome and IE 7,8,9 for PC. The vertical placement of the <h3> varies slightly by IE version but only by a little (and probably could be refined for more uniformity).
Since I assume people will complain about using an <h3> instead of a <legend>, yes, it's not as semantically correct. But it works.
Supporting the previous answer, the fieldset element came in html 4 and it helps to group like items within a form and creates a set or a field of like items or you can wrap all the items contained in your form..
e.g.
<form><fieldset><legend>Name of your field/Some Text(your case)</legend>
Then you can add your labels and inputs in p tags or table, but the p tag is more preferable. At the end close your fieldset and form tags.. and add this type of code to your css
fieldset{
border: thin dashed #000;
}
You can add border to your form elements in this way..
Probem I have a CSS button which am able to click only on the test area.
I am unable to click on the non-text area of the button.
Here is the HTML code for the "EDIT" button on my website.
<div class="stndrd_btn">
<p><?php echo $html->link('Edit','... destination....'); ?></p>
</div>
Below is the CSS code for the button.
.stndrd_btn {
width:140px;
height:30px;
background:url(img/stndrd_btn.png);
color:#FFF;
cursor: pointer;
}
.stndrd_btn p {
color:#FFF;
margin:0 auto;
text-align:center;
vertical-align: middle;
padding-top:6px;
font-size:14px;
font-weight: bold;
width: 100%;
height: 100%;
display: block;
cursor:pointer;
}
Please let me know how i can make the clicking work all over the button. THANKS!!
Make the <a> tag display: block and give it a width and height, so that the button fully consists of the <a> element.
Go to Google
Alternatively, you can give it a border so that the text is in the middle of the button:
Go to Google
I think the problem is that the p tag is inside the div but you apply the background image to the div but the link in the p. The p also has padding.
So in a nutshell try do it all in the one tag.
EDIT: like #Sjoerd says: use the a tag.
You don't really need the p tag. Apply everything to the div and I think you should be ok. I would really apply the click to an href though then you can also have a fallback if nesseccary for people without JS or search engines.
<div class="stndrd_btn">
<?php echo $html->link('Edit','... destination....'); ?>
</div>
In this case apply the button properties to the a tag.
make the <a> as display:block and give it padding as something like
padding:5px 5px 5px 5px;
this will increase the click area of a link
Try to use "a href" tag only and then add padding and background to it. padding: 5px 5px; background:grey; This will look like a button and will be clickable.