I have a search field at the top of my site that when your selected it jumps up abit out of position and when you click out of the box so it's not selected but not close it the search field is aligned correctly. I can't figure out what is going on to make it move while the cursor is in the input field.
https://www.argentscientific.com
Click the link then click the search icon on the right side of the top level menu and you will see the problem. Rather confused about this one.
This is because of :focus is not being included. When you select the search input, :focus is triggered but there is an existing css that overwrite your css, to fix this you need to explicitly include :focus into your css to prevent it being overwritten. Try changing below css from
.aws-container .aws-search-field{
width: 100%;
color: #313131;
padding: 6px;
line-height: 30px;
display: block;
font-size: 12px;
position: relative;
z-index: 2;
background: rgb(247, 247, 247);
-webkit-appearance: none;
}
to
.aws-container .aws-search-field, .aws-container .aws-search-field:focus {
width: 100%;
color: #313131;
padding: 6px;
line-height: 30px;
display: block;
font-size: 12px;
position: relative;
z-index: 2;
background: rgb(247, 247, 247);
-webkit-appearance: none;
}
Related
Using this codepen, I want to show the tooltip that can auto-resize. What I mean is, if there is a long text to be displayed as the tooltip message, can the tooltip box be resize to adjust the message in multiple lines? I know that ideally tooltip is supposed to be a few words at best, but still, I'm just curious to explore it.
Current:
Expected
Should I change the displayattribute? I tried changing to flex, inline, inline-flex, etc. but none worked. Even tried with width: auto but I think that will require some more logic.
body {
font-family: sans-serif;
}
[data-title] {
outline: red dotted 1px; /*optional styling*/
font-size: 30px; /*optional styling*/
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
position: absolute;
top: calc(100% + 10px);
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background: #000;
color: #fff;
font-size: 12px;
font-family: sans-serif;
word-break: break-word;
max-width: 150px;
}
[data-title]:hover::after {
content: '';
position: absolute;
bottom: -10px;
left: 8px;
display: inline-block;
color: #fff;
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
<h1>Styling html title tooltip</h1>
<span data-title="Here is some extra long text that should break the line">Hover me</span>
I changed bottom: -26px; to top: calc(100% + 10px);.
I removed white-space: inherit;.
I added word-break: break-word;.
I added max-width: 150px;.
Currently the width of the tooltip is limited by either max-width or the width of the span. You could add min-width but that could leave a lot of blank space if the text isn't long enough.
These changes should position the tooltip and the little arrow pointer thingy correctly so the neither overlap.
Change from no wrap to wrap
[data-title]:hover::before {white-space: wrap; }
I have an element that is 1x1 px, with a box shadow that is much larger.
I would like a tooltip to display whenever the user hovers, but the problem is that the tooltip only activates when the user hovers over the 1x1 px area, ignoring the huge box shadow.
The blue element (glow) in this fiddle is an example. I tried making the green element (glow2) larger just to show how the tooltip should look.
https://jsfiddle.net/fortunette/fLm3d7oz/1/
.glow {
width: 1px;
height: 1px;
background-color: blue;
border-radius: 50%;
box-shadow: 0 0 24px 19px blue;
position:absolute;
top:300px;
left:100px;
}
Other requirements are that there are an arbitrary number of these glowing elements at arbitrary positions and sizes.
Create pseudo-elements that are the same size as the entire area of your divs including the box-shadow.
The pseudo-element overlays can be transparent. Then use the :hover state for the pseudo-elements to trigger the tool tip.
Working example:
.glow {
width: 1px;
height: 1px;
background-color: blue;
border-radius: 50%;
box-shadow: 0 0 24px 19px blue;
position: relative;
margin: 2em;
}
.glow:after {
content: "";
display: block;
height: 50px;
width: 50px;
position: absolute;
top: -25px; /* needs to be half of height and width */
left: -25px; /* needs to be half of height and width */
border-radius: 50%;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.glow .tooltiptext {
display: none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0; /* Position the tooltip */
position: absolute;
z-index: 1;
}
.glow:hover:hover .tooltiptext {
display: block;
}
<div class="glow"><span class="tooltiptext">Tooltip text</span></div>
The box shadow is not part of the box html element and that is why your tooltip is not showing. I would recommend you wrap your box with in a div and use the tooltip on the outer div that also contains your box shadow.
Of course you will have to add padding to the outer div so it will fully contain the box shadow. This way when the user hover on the box shadow, they are actually hovering on top of the outer div and the tooltip will show up. You can use google chrome developing tools (ctrl+shift+i) to see how much padding you will need. Use a: hover or JqueryUI tooltip on the outer div class. Hope this helps!
The file upload field is controlled by the browser so that one should automatically be translated based on the browsers settings. I need set my language on this button. How I can do that?
I've found solution on sitepoint. Just below .file-resume on your file input name and then modify your button.
/* Style wrapping span as button */
span.wpcf7-form-control-wrap.file-resume {//FILE-REsume == your name of file input
display: inline-block;
position: relative;
width: 120px;
height: 40px;
border-radius: 5px;
border: solid 1px #11b28e;
background: gray;
color: #FFF;
overflow:hidden;
}
/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
input.wpcf7-form-control.wpcf7-file {
position: absolute;
width: 1500px;
height: 1000px;
right: 0;
bottom: 0;
outline: none !important;
}
/* Add button text */
.wpcf7-file:before {
content: "прикріпити файл";
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
font-size: 16px;
}
To change the text 'Select File' on the button I use the code below. And it works fine for me.
However, I can't change the text "No file chosen" next to the button.
Can anyone tell me something about this topic?
.wpcf7-file::-webkit-file-upload-button {
visibility: hidden;
}
.wpcf7-file::before {
content: 'Select File NEW';
display: inline-block;
background: #00a0dd !important;
padding: 15px 15px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font-size: 10pt;
color:#FFF
}
.wpcf7-file:hover::before {
border-color: black;
}
.wpcf7-file:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
I followed a tutorial online that helped me to replace browsers' default dropdown selection arrow with my own image. This has worked fine and you can see the example here.
.headerDropdown {
border-radius: 6px;
border: 2px solid #d4d4d4;
height: 34px;
}
.headerDropdown select {
height: 34px;
line-height: 34px;
padding-left: 10px;
padding-right: 5px;
margin-right: 20px;
font-size: 16px;
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url("http://enyojs.com/enyo-2.5.1/lib/moonstone/images/caret-black-small-up-icon.png") right no-repeat;
width: 100%;
background-position: 98% 50%;
background-color: white;
text-indent: 0.01px;
text-overflow: "";
transition: 0.2s;
}
.headerDropdown select::-ms-expand {
display: none;
}
.headerDropdown select::-moz-focus-inner {
border: 0;
padding: 0;
}
.rotateCaret {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
It looks a bit stiff so I want to rotate my image when the dropdown is being opened. I found a lot of examples online dealing with the problem but they all solve it when it is actually a separate object (image, for instance, not a background attribute like in my case).
$("#mainnavigation").on("click", function() {
$(this).toggleClass("rotateCaret");
});
My question is - how can I rotate my dropdown selection image without affecting the entire dropdown? I need only the image next to the content, so to say.
Thanks in advance!
PS. Ignore my poor choice of image, I used it only as an example.
Add another element for the caret and rotate it separately. You can create a custom CSS animation and manipulate it as you wish.
https://jsfiddle.net/johnniebenson/xajzuxn4/
I have default bootstrap tooltip with custom styles for arrows that have only font color and size, nothing special with paddings or margin.
If I have short text - it's ok:
If it's a littile longer - arrow goes down through the tooltip:
another common problem - if tooltip position is near the end of the page/window:
There are the same styles for each tooltip.
I've tried to fix it by different ways based on answers from stackoverflow, but it wasn't helpful.
Please, help me to understand this strange behaviour. What style should I use for arrows to make it fixed at the border of tooltip?
PS: another detail - if I will swap "hide people" and "show feedback" tooltips - it becomes ok. So, probably it depends on tooltip position too.
This what I expected!
Can you try it? and post your after/before pseudo code
reference
http://cssdeck.com/labs/pure-css-tooltip-with-arrow
.tooltip:hover:before {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: block;
left: 1em;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
z-index: 98;
}
.tooltip:hover:after {
border: solid;
border-color: #111 transparent;
border-color: rgba(0,0,0,.8) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1em;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 99;
}
Thanks to #Youness,
max-width exactly for main .tooltip class is helpful.