Родственный селектор плюс символ *

Добрый день, форумчане!
Прошу подсказки, совсем запутался, гугл меня не выручил(
Есть картинка, при нажатии на которую возникает подсказка:

HTML:

1. <input type="checkbox" id="tip-checkbox" class="tip-checkbox">
2.                     <label for="tip-checkbox" class="support"><img src="q_mark.png" alt="tip_1"></label>
3.                         <span class='tip-block'>
4.                              <span class="tip">
5.                              Вы войдете с помощью кода из СМС на Ваш телефон
6.                      <label for="tip-checkbox" class="tip-close">X</label>
7.                              </span>
8.                         </span>

И есть css стили, чтоб подсказка появлялась как надо:

Код (CSS):

1. .tip-checkbox {
2. display: none;
3. }
4.  
5. #tip-checkbox:checked ~ * .tip {
6.   display: block;
7. }
8.  
9. .tip {
10.     display: none;
11.     border: 1px solid #ccc;
12.     box-shadow: 5px 5px 0.5em -0.1em rgba(0,0,6,0.5);
13.     text-align: left
14. }
15.  
16. .tip-close {
17.     display: inline-block;
18.     position: relative;
19.     background: #333;
20.     border-radius: 20px;
21.     border: 2px solid #FFF;
22.     font: normal bold 14px Comic Sans MS;
23.     text-align: center;
24.     color: #fff;
25.     cursor: pointer;
26.     padding: 0 4px;
27. }

Объясните пожалуйста в чем суть:

Код (CSS):

1. #tip-checkbox:checked ~ * .tip {
2.   display: block;
3. }

Если в checkbox стоит галочка, то применить к родственному элементу .tip свойства display: block ?
Почему без символа * это не работает? Из-за того что tip не прямой потомок tip-chebox ?
Объясните пожалуйста...