Сетка Bootstrap-а DIV как ссылка (нюансы)

319
13 февраля 2017, 13:48

Возникла проблема , а знаний пока не хватает и ответа найти не могу. Блоки как ссылки , у ссылок есть title. Между блоками абсолютно нет отступов , поэтому если появится title на блоке 1 , то при переходе на 2 блок , он сменится , но зависнет на 1 блоке.

Как сделать чтобы пропадал этот title при переходе с блока на блок ? Или отступ как сделать ? Менять CSS bootstrap-a или есть все таки что то ?

Вот кусок кода:

.col-lg-4{float:left;width:33.33333333%}
<div class="row"> 
  <a href="#" title="1 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">1 Блок</div></div></a> 
  <a href="#" title="2 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">2 Блок</div></div></a> 
  <a href="#" title="3 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">3 Блок</div></div></a> 
</div>

Answer 1

Если вы используете bootsrap, то можно использовать: data-toggle="tooltip".

<div class="row">
  <a href="#" data-toggle="tooltip" data-placement="top" "title="1 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">1 Блок</div></div></a>
  <a href="#" data-toggle="tooltip" data-placement="right" "title="2 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">2 Блок</div></div></a>
  <a href="#" data-toggle="tooltip" data-placement="bottom" "title="3 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">3 Блок</div></div></a>
  <a href="#" data-toggle="tooltip" data-placement="left" "title="3 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">3 Блок</div></div></a>
</div>

JS-script:

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>
READ ALSO
Мое первое изображение SVG
HTML

Мое первое изображение SVG

Я сделал свой первый опыт работы с <path> на SVG и было интересно, есть ли лучший способ сделать этоПример получился, как я хотел, только в этих...

 322
Phaser.js + Electron Framework. Почему не работает?
HTML

Phaser.js + Electron Framework. Почему не работает?

Пытаюсь подключить фреймворк phaserjs к electron, для создания desktop-игры на html5

 300
События в React
HTML

События в React

 558
cursor: no-drop; при pointer-events: none;
HTML

cursor: no-drop; при pointer-events: none;

Здравствуйте

 326