如何在每个单选按钮元素旁边布置工具提示图标

时间：2019-04-26 14:07:50

标签： jquery css 

   .cell { width: 60%; max-width: 70%;}
    
		
	#product-form .stock label{
	  position: relative;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1.5rem;
	  text-align: center;
	  height: 80px;
	  line-height: 80px; 
	  display: block;
	  cursor: pointer;
	  border: 3px solid #2fcc71;
	  border-radius: 10px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
	#product-form .stock label span{
	display: inline-block !important;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1rem;
	  text-align: left;
	  height: 10px !important;
	  line-height: 10px !important; 	  
	}	
	
	#product-form .stock input:checked + label{
	  border: 3px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	}
	
#product-form .stock input:checked + label:after {
	  content: "\2713";
	  width: 40px;
	  height: 40px;
	  line-height: 40px;
	  border-radius: 100%;
	  border: 2px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	  z-index: 999;
	  position: absolute;
	  top: -10px;
	  right: -10px;
	}

#product-form .stock input{
	display: none;
}        
      
.help-tip{
    position: absolute;
    top: 50px;
    right: -30px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
    z-index: 999;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}      
	<form id="product-form">
		<section class="stock">
			Choose your material:  
<input type='radio' name='radio_stock' id='5' value='5'><label class='5-label cell' for='5'>ABC<div class='help-tip'>
    <p>tooltip ABC</p>
</div></label><input type='radio' name='radio_stock' id='1' value='1'><label class='1-label cell' for='1'>DEF)<div class='help-tip'>
    <p>Tooltip DEF</p>
</div>
</label>
		</section>
    </form>

我想在每个单选按钮元素（未将其设置为单选按钮）旁边放置一个工具提示图标，以便单击它不会选择单选按钮

我尝试将工具提示代码放在单选按钮元素代码的外面，但是它没有出现在正确的位置。

请参见完整代码：

https://jsfiddle.net/6fq2Le09/ 

<form id="product-form">
  <section class="stock">
    Choose your material:
    <input type='radio' name='radio_stock' id='5' value='5'><label class='5-label cell' for='5'>ABC<div class='help-tip'>
        <p>tooltip ABC</p>
    </div></label><input type='radio' name='radio_stock' id='1' value='1'><label class='1-label cell' for='1'>DEF)<div class='help-tip'>
        <p>Tooltip DEF</p>
    </div>
    </label>
  </section>
</form>

这是我到达的地方。问题是单击工具提示图标也选择了单选按钮。我只想单击该图标并显示相关的工具提示。

预期结果： 单击工具提示应仅显示工具提示，而不选择单选按钮（将选项变为绿色）

TIA！

2 个答案:

答案 0 :(得分：1)

您可以在工具提示div中停止点击传播事件。

<div class='help-tip' onclick="return false;">
...
</div>


.cell { width: 60%; max-width: 70%;}
    
		
	#product-form .stock label{
	  position: relative;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1.5rem;
	  text-align: center;
	  height: 80px;
	  line-height: 80px; 
	  display: block;
	  cursor: pointer;
	  border: 3px solid #2fcc71;
	  border-radius: 10px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
	#product-form .stock label span{
	display: inline-block !important;
	  color: #2fcc71;
	  background-color: #fff;
	  font-size: 1rem;
	  text-align: left;
	  height: 10px !important;
	  line-height: 10px !important; 	  
	}	
	
	#product-form .stock input:checked + label{
	  border: 3px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	}
	
#product-form .stock input:checked + label:after {
	  content: "\2713";
	  width: 40px;
	  height: 40px;
	  line-height: 40px;
	  border-radius: 100%;
	  border: 2px solid #333;
	  background-color: #2fcc71;
	  color: #fff;
	  z-index: 999;
	  position: absolute;
	  top: -10px;
	  right: -10px;
	}

#product-form .stock input{
	display: none;
}        
      
.help-tip{
    position: absolute;
    top: 50px;
    right: -30px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
    z-index: 999;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}
<form id="product-form">
   <section class="stock">
      Choose your material:  
      <input type='radio' name='radio_stock' id='5' value='5'>
      <label class='5-label cell' for='5'>
         ABC
         <div class='help-tip' onclick="return false;">
            <p>tooltip ABC</p>
         </div>
      </label>
      <input type='radio' name='radio_stock' id='1' value='1'>
      <label class='1-label cell' for='1'>
         DEF)
         <div class='help-tip' onclick="return false;">
            <p>Tooltip DEF</p>
         </div>
      </label>
   </section>
</form>

答案 1 :(得分：0)

将图标移到label元素之外。

我还为每个input / label / help-tip组合添加了一个包装器，以使其保持对齐状态变得更加容易。将display: flex添加到该包装器即可。删除help-tip元素的绝对定位（但添加相对定位）可以使工具提示状态正常工作。

.cell {
  width: 60%;
  max-width: 70%;
}

#product-form .stock label {
  position: relative;
  color: #2fcc71;
  background-color: #fff;
  font-size: 1.5rem;
  text-align: center;
  height: 80px;
  line-height: 80px;
  display: block;
  cursor: pointer;
  border: 3px solid #2fcc71;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#product-form .stock label span {
  display: inline-block !important;
  color: #2fcc71;
  background-color: #fff;
  font-size: 1rem;
  text-align: left;
  height: 10px !important;
  line-height: 10px !important;
}

#product-form .stock input:checked+label {
  border: 3px solid #333;
  background-color: #2fcc71;
  color: #fff;
}

#product-form .stock input:checked+label:after {
  content: "\2713";
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 100%;
  border: 2px solid #333;
  background-color: #2fcc71;
  color: #fff;
  z-index: 999;
  position: absolute;
  top: -10px;
  right: -10px;
}

#product-form .stock input {
  display: none;
}

.radio-wrapper {
  display: flex;
}

.help-tip {
  /*
  position: absolute;
  top: 50px;
  right: -30px;
  */
  position: relative;
  text-align: center;
  background-color: #BCDBEA;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 26px;
  cursor: default;
}

.help-tip:before {
  content: '?';
  font-weight: bold;
  color: #fff;
}

.help-tip:hover p {
  display: block;
  transform-origin: 100% 0%;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  animation: fadeIn 0.3s ease-in-out;
}

.help-tip p {
  /* The tooltip */
  display: none;
  text-align: left;
  background-color: #1E2021;
  padding: 20px;
  width: 300px;
  position: absolute;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  right: -4px;
  color: #FFF;
  font-size: 13px;
  line-height: 1.4;
  z-index: 999;
}

.help-tip p:before {
  /* The pointer of the tooltip */
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: #1E2021;
  right: 10px;
  top: -12px;
}

.help-tip p:after {
  /* Prevents the tooltip from being hidden */
  width: 100%;
  height: 40px;
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
}


/* CSS animation */

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 100%;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}
<form id="product-form">
  <section class="stock">
    Choose your material:
    <div class="radio-wrapper"><input type='radio' name='radio_stock' id='5' value='5'><label class='5-label cell' for='5'>ABC</label>
      <div class='help-tip'>
        <p>tooltip ABC</p>
      </div>
    </div>
    <div class="radio-wrapper"><input type='radio' name='radio_stock' id='1' value='1'><label class='1-label cell' for='1'>DEF)</label>
      <div class='help-tip'>
        <p>Tooltip DEF</p>
      </div>
    </div>
  </section>
</form>

我会注意到，相对于“标签”，图标现在是顶部对齐而不是底部对齐。如果这是一个问题，只需添加margin-top: 56px（“标签”的高度-图标的高度）即可。

相关问题
最新问题