I have a table in html that when hovering over it shows a text.The displayed text has no design, how can I apply some css?
<center>
<div id="container">
<table class="map">
<?php
for ($i=1; $i < 101; $i++) {
echo "</tr>";
for ($j=1; $j < 100 ; $j++) {
$prueba = $i .":".$j;
if ($prueba == '50:50') {
echo "<td onmouseover='' style='cursor: pointer; background-color:#FF0000' title='title css' id=$prueba></td>";
}else{
echo "<td id=$prueba></td>";
}
}
}
?>
</table>
</div>
</center>
<script>
$(document).ready(function(){
$('tr').mouseover(function(){
var valueOfTd = $(this).find('td:first-child').text();
alert(valueOfTd);
});
});
</script>
Image:
http://prntscr.com/vz8dyg
I would like to make the letters bigger, in bold etc.
Thanks!!!
Hi Andoni,
Unfortunately the attribute that triggers the Tool Tip Text on the browser it is hard to customize(title attribute), I can even dare to believe that is not possible to style it, since the way it gets displayed varies from browser to browser, hence, it makes it difficult to display nice looking styling to it, However, you could get use of the pseudo codes such as data-* to create your own style based on that. You will have to feed this pseudo attribute with your php variables or token but here I am posting an example of how to achieve this by using these pseudo custom attributes. I certainly hope this helps with your case, pal!
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.7s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #1C2833;
color: #F4D03F;
font-size: 110%;
position: absolute;
padding: 5px;
bottom: -1.6em;
left: 95%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
border-radius: 10%;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
.custom-td {
cursor: pointer;
background-color:#FF0000;
padding: 7px;
color:#FBFCFC;
width:60%;
text-align:center;
font-family:'verdana'
}
<center>
<div id="container">
<table class="map">
<tr>
<td class="custom-td" data-title="title css">Testing this script on stack<b>overFlow</b>
</td>
</tr>
</table>
</div>
</center>
Related
EDIT:
I came across this code:
add_filter( 'woocommerce_attribute_label', 'custom_attribute_label', 10, 3 );
function custom_attribute_label( $label, $name, $product ) {
$taxonomy = 'attribute_pa_'.$name;
if( $taxonomy == 'attribute_pa_staat' )
$label = $label . ' info<i class="fa fa-question"></i> ' );
return $label;
}
But it doesn't work (yet) how can I make it work?
See the page I'm trying this on here:
https://dev.pctoppers.nl/product/dell-latitude-e5550-refurbished/
End of edit
I'm trying to create an icon with a specific ID so I can link a popup to it.
I want to do this with a ::after pseudo element (if possible). We have products with different grades that we want to add an extra explanation to.
This is the code I've tried:
[data-value="a-grade"]::after {
content:"\f05a\f05a";
font-family: "Font Awesome 6 Duotone"!important;
padding:0px!important;
margin:0px!important;}
This unfortunately doesn't work and puts the icon behind the text instead of on-top of the small window its in. See screenshot below
The most ideal look would be this:
The blue circle being the icon.
Is there any way of achieving this? Keep in mind that it needs its own #ID so I can link a popup.
Thanks in advance!
With CSS property position (absolute and relative) you can make it.
.w {
width: 400px;
height: 100px;
background: lightblue;
position: relative;
}
.txt {
padding:10px;
}
/* Top right text */
.top-right {
font-size:2rem;
position: absolute;
top: -5px;
right: -5px;
background: red;
border-radius:40px;
height:10px;
width:10px;
}
<div class="w">
<div class="top-right">*</div>
<div class="txt">text</div>
</div>
Update with pseudo element
.w {
width: 400px;
height: 100px;
background: lightblue;
position: relative;
}
.txt {
padding:10px;
}
[data-value="a-grade"]::after {
content:"!";
font-family: "Font Awesome 6 Duotone"!important;
font-size:2rem;
position: absolute;
top: -15px;
right: -5px;
}
<div class="w" >
<div classs="top-right" data-value="a-grade"></div>
<div class="txt">text</div>
</div>
I use this solution to add a tooltip to my webpage. The application is an MVC ASP.NET application with Razor pages. I want the text of the tooltip to have line breaks (<br/>). This can be done by adding the HTML <br /> in the text. This works well, however, I have a function (see below) at the top of my page that renders a string that is added to my span-element with the <br>-tags.
private static string GetEmployeeList(ProjectSchedule ps)
{
if (ps.Employees.Count > 0)
{
string empList = string.Empty;
foreach (var employee in ps.Employees)
{
empList += employee.Name + "<br/>";
}
return empList;
}
return string.Empty;
}
The result of the function is something like: "Name 1<br/>Name 2<br/>Name 3<br/>".
The piece of code rendering the tooltip looks like:
<div class="data-tooltip">
Developers
<span class="data-tooltiptext">#GetEmployeeList(item)</span>
</div>
The problem is that the <br/> is not working, when the tooltips shows I see the hardcoded <br/> as part of the string while I expected the result looks something like:
Name 1
Name 2
Name 3
The styling used:
.data-tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.data-tooltip .data-tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.data-tooltip .data-tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.data-tooltip:hover .data-tooltiptext {
visibility: visible;
opacity: 1;
}
Result:
Does someone have an idea how to solve this? TIA.
You have recognized the right problem in your answer, but that is not the correct solution. Your solution has the danger that if the names contain any HTML, that will be rendered as well, which opens you up to HTML and script injection attacks.
Generally you should avoid using #Html.Raw and shouldn't generate HTML outside the template. All HTML generation should instead happen directly in the template:
<div class="data-tooltip">
Developers
<span class="data-tooltiptext">
#foreach (var employee in item.Employees)
{#employee.Name<br/>}
</span>
</div>
After all, the solution was simple (as always).
#Shashank Gb got me thinking. First I used the developer tools, but there the outputted string showed ad "Name 1 <br/> Name 2<br/>"
So nothing wrong there I would say. However, when I used "View page-source" I saw that the <br/> was rendered to <br;>
The solution for me was to use #Html.Raw, this prevented the conversion of the HTML <br/>-tag:
<div class="data-tooltip">
Developers
<span class="data-tooltiptext">#Html.Raw(#GetEmployeeList(item))</span>
</div>
Thx for the help.
I made a custom title bar application and then I gave it a file menu also.(electron)
Now I want to open a menu on click of this menu. I want a popup but the popup shouldn't be the standard windows popup for the menus , I want to make that custom too...but crating a new window can become very tedious if it takes too much time.
Most probably I want to instantiate a section , but I have no idea how to do it
The current situation
I have a window with a #container div having a #buttons div having 3 #minimize,#maximize,#close each with a span
The #buttons also has 2 divs .menu1 and .menu2 i want these menus to behave like normal menus in windows like the file and edit menu
<div id="container">
<nav>
<div id="buttons">
<div id="file">
<span class = "menu1">file</span>
</div>
<div id="about_us">
<span class = "menu2">about..us</span>
</div>
<div id="minimize" onclick="min()">
<span>-</span>
</div>
<div id="maximize" onclick="max()">
<span>+</span>
</div>
<div id="close" onclick="uff()">
<span>×</span>
</div>
</div>
</nav>
</div>
The result is
All the menus and buttons are clickable and have hover colors
Here you need to do something like this:
create the popup window in html and css. Use position: absolute; and z-index to get it to overlay the rest of the application.
Then hide the popup with a css class of for example .hidethat sets the popup to display: none;.
You now need a small piece of javascript to toggle that .hide class. Something like for example a function like this: const togglePopup = () => document.querySelector('.popup').classList.toggle('hide')
Trigger the togglePopup script with the click on one of your elements:
const trigger = document.querySelector('#idOrClassOfTriggerElement')
trigger.addEventListener('click', () => togglePopup()
Add a method for closing the popup with the same type of technique – adding an eventlistener to a trigger element (X icon for example) and calling the same toggle function as in #3.
Hope this was somehow what you wanted to achieve.
EDIT: Example code for a popup overlay:
const popup = document.querySelector('.popup')
const closeBtn = document.querySelector('.popup-close')
const openBtn = document.querySelector('.open')
const body = document.querySelector('body')
const showPopup = () => {
popup.classList.add('fade-in')
body.classList.add('scroll-stop')
}
const hidePopup = () => {
popup.classList.remove('fade-in')
popup.classList.add('fade-out')
body.classList.remove('scroll-stop')
setTimeout(() => {
popup.classList.remove('fade-out')
}, 500)
body.focus();
}
openBtn.addEventListener('click', showPopup)
closeBtn.addEventListener('click', hidePopup)
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fefefe;
z-index: 9;
opacity: 0;
pointer-events: none;
overflow: scroll;
}
.popup-inner {
width: 100%;
position: relative;
padding: 6% 16% 0;
}
.popup-close {
position: relative;
z-index: 10;
text-align: center;
color: #aaa;
font-size: 4rem;
cursor: pointer;
position: fixed;
right: 3%;
top: 3%;
}
.popup-close::before {
content: "\00d7";
}
.popup-close:hover::before {
color: #000;
transition: 0.6s all ease-in;
}
.open {
text-align: center;
cursor: pointer;
background: transparent;
padding: 1rem 2rem;
border: 2px solid;
border-radius: 6px;
color: #000;
font-weight: bold;
position: absolute;
top: 25%;
left: 44%;
}
.open:hover {
background: #ffffff18;
}
.fade-in {
opacity: 1;
pointer-events: unset;
transition: 0.3s all ease;
}
.fade-out {
opacity: 0;
pointer-events: none;
transition: 0.3s all ease;
}
.background {
height: 100vh;
width: 100vw;
background: olive;
margin: 0;
padding: 0;
}
<div class="background">
<button class="open">OPEN POPUP</a>
</div>
<!-- Add popup at the bottom of the html document, before </body> -->
<div class="popup" role="dialog" aria-label="Popup">
<div class="popup-close" role="button" arial-label="Close popup" tabindex="1"></div>
<div class="popup-inner">
<h2>This is a popup title</h3>
<p>Popup content...</p>
</div>
</div>
I want to create a dropdown box that contains of users with images. Like this image: Credits: Kendo. i want to create this type of dropdown with css only and js if needed. Is this can be done without plugin?
Here's my sample out from database and php:
$link=mysqli_connect('127.0.0.1','user','pass');
mysqli_select_db($link,"db");
$Sunshine_Award=mysqli_query($link,"select * from Sunshine_Award");
echo "<select style="width:161px; height: 33px; border-radius: 5px;"/>";
while($Sunshine_Rows=mysqli_fetch_array($Sunshine_Award))
{
echo "<option>".$Sunshine_Rows['name']."</option>";
}
echo "</select>";
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: green;
border: solid 1px blue;
}
#panel {
padding: 50px;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">
<div id=users>user name</div><div id=users>user name</div></div>
</body>
use your server side program to insert user name & image inside the #panel
we can see lot of empty space in link as below the image. I want to hide those empty space.
.main {
margin: 0 auto;
width: 1000px;
}
body, button, input, select, table, textarea {
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}
html
<div class="custom_case">
<div class="custom_case_left">
<h1 class="cc1">Custom Cases</h1>
<h2 class="cc2">Make Your Own design</h2>
</div>
<?php
$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';
$brandSelect .= '</select>';
echo '<select id="model_select"><option value="">My Model</option></select>';
?>
<div class ="cc3">
<div class ="cc4">
<span class ="cc5"> See Cases > </span>
</div>
</div>
I dont want to give so much empty space between image and below footer
please help me for this.
Thanks in advance.
Figured it out for you!
Your image of the phone cases is what is causing the space issue.
.custom_case_right img {
/*float:right;*/
/*bottom:320px;*/
}
That will fix the spacing beneath your image. Now your image is displaying improperly and to fix do this
.custom_case_right {
float:right;
margin-top:-310px;
}
These two changes ought to take care of it for you. I tested this out in Chrome.
You'll still need to think about how you want to have your image behave as your viewport shrinks though.
trying to make img:
line-height: 0;
vertical-align: top or bottom;
You have to fix the height of main-container.
enter code here.main-container{
height:550px;
}
Make this changes to your classes:
.col1-layout .col-main {
position: relative;
}
.custom_case_right {
float: left;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
And in your image remove position absolute, add this style instead:
.custom_case_right img {
position: relative;
width: 620px;
height: 100%;
}