无线电输入上的引导工具提示

Posted 2023-03-05

【中文标题】无线电输入上的引导工具提示

【英文标题】：Bootstrap tooltip on radio input

【发布时间】：2016-11-10 05:02:17

【问题描述】：

此代码不起作用。也尝试不使用 JS，将属性放入<input>。似乎没有任何效果。

$('#radio1').tooltip(
    placement: "bottom",
    trigger: "hover"
);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="btn-group" data-toggle="buttons">

    <label class="btn btn-primary active">
        <input type="radio" name="options" id="radio1" autocomplete="off" 
            data-toggle="tooltip" title="tooltip on radio!">Radio 1
    </label>

    <label class="btn btn-primary">
        <input type="radio" name="options" id="radio2" autocomplete="off">Radio 2
    </label>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【参考方案1】：

尝试将工具提示的属性应用到<label>：

$(function () 
  $('[data-toggle="tooltip"]').tooltip()
)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-primary active" data-toggle="tooltip" data-placement="bottom" title="tooltip on radio!">
    <input type="radio" name="options" id="radio1" autocomplete="off">Radio 1
  </label>

  <label class="btn btn-primary">
    <input type="radio" name="options" id="radio2" autocomplete="off">Radio 2
  </label>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>