4
\$\begingroup\$

I'm looking to improve my code as seen in the demo link below. The code displays a list in a tooltip. The tooltip is accessed by hovering over the last element of the main list.

Here's the demo.

The ultimate objective is to wrap only one of the below list item in the code in a JS for loop which will dynamically create more than one list item.

<li class="coupontooltip_li_list"> 
<div>  
    <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
    <span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span> 
</div> 

Full HTML code:

<div>  
     <ul id="cellvaluelist">  
         <li><a href="#" class="swim">MAIN 1</a></li> 
         <li><a href="#" class="chrono">MAIN 2</a></li> 
         <li><a href="#" class="couponcode">MAIN 3 
                <div class="coupontooltip">  
                    <ul class="coupontooltip_ul_list">  
                        <li class="coupontooltip_li_list"> 
                            <div>  
                                <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
                                <span class="coupontooltiplistspan">Distance</br>Duration: </br>Laps: </span> 
                            </div> 
                        </li></br> 

                        <li class="coupontooltip_li_list"> 
                            <div>  
                                <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
                                <span class="coupontooltiplistspan">SET 1: abcd</br>SET 2: EFGH</br>SET 3: ijkl</span> 
                            </div> 
                        </li></br> 

                        <li class="coupontooltip_li_list"> 
                            <div>  
                                <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
                                <span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span> 
                            </div> 
                        </li> 

                    </ul> 
                </div>  
              </a>  
         </li> 
     </ul> 
</div> 

Full CSS code:

#cellvaluelist {
  font-family:'Trebuchet MS', Tahoma, Sans-serif;
  font-size: 20px;  
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#cellvaluelist > li {
  list-style-type: none;
  text-align: left;
  border-bottom: 2px solid #F5F5F5;
}

#cellvaluelist > li:last-child {
  border: none;
}

#cellvaluelist > li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 150px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

#cellvaluelist > li a:hover {
  background: #F5F5F5;
}  

.swim {
  background: #626FD1;
  font-size: 15px;
  font-weight: normal; 
}

.chrono {
    background: #EDCF47;
    font-size: 15px;
    font-weight: normal; 
}

.couponcode {
    background: #47ED4D;
    font-size: 15px;
    font-weight: normal;
}

.couponcode:hover .coupontooltip {
    display: block;
}

.coupontooltip {
    display: none;
    background: #FFCC00;
    position: absolute;
    z-index: 1000;
}

.coupontooltip_ul_list, .coupontooltip_li_list {
    background: #FF0000;
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%    
}

 .coupontooltip_li_list {
    background: #D6D6D6;
    border-bottom: 2px solid #F5F5F5;
 }

.coupontooltip_img {
    width: 50px;
    height: 50px;
    float: left;
    padding: 5px;    
}

.coupontooltiplistspan {
   display: inline-block;
}
\$\endgroup\$
4
\$\begingroup\$

You don't need this div

<div class="coupontooltip">

and then you would just move the CSS for it into the CSS for the ul that is inside that div currently.

so instead of this

.coupontooltip {
    display: none;
    background: #FFCC00;
    position: absolute;
    z-index: 1000;
}

.coupontooltip_ul_list, .coupontooltip_li_list {
    background: #FF0000;
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%    
}

You will end up with this:

.coupontooltip_ul_list {
    display: none;
    background: #FFCC00;
    position: absolute;
    z-index: 1000;
}

.coupontooltip_ul_list, .coupontooltip_li_list {
    background: #FF0000;
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%    
}

don't forget to change the .coupontooltip to .coupontooltip_ul_list Here:

.couponcode:hover .coupontooltip {
    display: block;
}

otherwise it won't function.

I would also get rid of the other divs in your code

the image tags and the span tags (which I am unsure you need these either as the li tags are text tags anyway) are already held by the li tag and you aren't doing anything with these div tags, they are just clutter and add an extra indentation that you don't need.

with the span, I would just make this another list to be honest with you or maybe even a table, they are displaying data

Here is what your HTML should look like (without changing those spans to tables/lists, I will let you play with that when you are inserting the data with your JavaScript loops)

<div>
    <ul id="cellvaluelist">
        <li>
            <a href="#" class="swim">MAIN 1</a>
        </li>
        <li>
            <a href="#" class="chrono">MAIN 2</a>
        </li>
        <li>
            <a href="#" class="couponcode">MAIN 3 
                <ul class="coupontooltip_ul_list">  
                    <li class="coupontooltip_li_list"> 
                        <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
                        <span class="coupontooltiplistspan">Distance</br>Duration: </br>Laps: </span> 
                    </li>
                    </br> 
                    <li class="coupontooltip_li_list"> 
                        <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
                        <span class="coupontooltiplistspan">SET 1: abcd</br>SET 2: EFGH</br>SET 3: ijkl</span> 
                    </li></br> 
                    <li class="coupontooltip_li_list"> 
                        <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
                        <span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span> 
                    </li> 
                </ul> 
            </a> 
        </li>
    </ul>
</div>

#cellvaluelist {
  font-family: 'Trebuchet MS', Tahoma, Sans-serif;
  font-size: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#cellvaluelist > li {
  list-style-type: none;
  text-align: left;
  border-bottom: 2px solid #F5F5F5;
}
#cellvaluelist > li:last-child {
  border: none;
}
#cellvaluelist > li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 150px;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
#cellvaluelist > li a:hover {
  background: #F5F5F5;
}
.swim {
  background: #626FD1;
  font-size: 15px;
  font-weight: normal;
}
.chrono {
  background: #EDCF47;
  font-size: 15px;
  font-weight: normal;
}
.couponcode {
  background: #47ED4D;
  font-size: 15px;
  font-weight: normal;
}
.couponcode:hover .coupontooltip_ul_list {
  display: block;
}
.coupontooltip_ul_list {
  display: none;
  background: #FFCC00;
  position: absolute;
  z-index: 1000;
}
.coupontooltip_ul_list,
.coupontooltip_li_list {
  background: #FF0000;
  list-style-type: none;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%
}
.coupontooltip_li_list {
  background: #D6D6D6;
  border-bottom: 2px solid #F5F5F5;
}
.coupontooltip_img {
  width: 50px;
  height: 50px;
  float: left;
  padding: 5px;
}
.coupontooltiplistspan {
  display: inline-block;
}
<div>
    <ul id="cellvaluelist">
        <li>
            <a href="#" class="swim">MAIN 1</a>
        </li>
        <li>
            <a href="#" class="chrono">MAIN 2</a>
        </li>
        <li>
            <a href="#" class="couponcode">MAIN 3 
                <ul class="coupontooltip_ul_list">  
                    <li class="coupontooltip_li_list"> 
                        <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
                        <span class="coupontooltiplistspan">Distance</br>Duration: </br>Laps: </span> 
                    </li>
                    </br> 
                    <li class="coupontooltip_li_list"> 
                        <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
                        <span class="coupontooltiplistspan">SET 1: abcd</br>SET 2: EFGH</br>SET 3: ijkl</span> 
                    </li></br> 
                    <li class="coupontooltip_li_list"> 
                        <img class="coupontooltip_img" src="http://lorempixum.com/100/100/nature/1">  
                        <span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span> 
                    </li> 
                </ul> 
            </a> 
        </li>
    </ul>
</div>

\$\endgroup\$
  • 1
    \$\begingroup\$ really appreciate the suggestions .. i made some other changes but your suggestions were also applied \$\endgroup\$ – ANM Apr 2 '15 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.