#5069

by Banandrew

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<h3>Hover the second checkbox:</h3>

<div class="ui grid container">
  <div class="one column row">
    <div class="column">
      <div class="ui toggle checkbox" data-tooltip="user admin">
        <input class="checkbox roles" id="role_ROLE_user" type="checkbox" value="ROLE_user" name="roles">
        <label>user admin</label>
      </div>
    </div>
  </div>
  <div class="one column row">
    <div class="column">
      <div class="ui toggle checkbox" data-tooltip="system admin  fdfdfdfddfddf">
        <input class="checkbox roles" id="role_ROLE_admin" type="checkbox" value="ROLE_admin" name="roles">
        <label>system admin</label>
      </div>
    </div>
  </div>
</div>

CSS

body {
    padding: 1em;
}

JavaScript

$('.ui.checkbox')
	.checkbox()