Tippy.js привязать картинку к tooltip

184

08 августа 2018, 14:40

Использую tippy.js и имею следующий код: CodePen

<label class="btn" title="I'm a tooltip!"><input class="uk-radio" type="radio" name="radio17" data-toggle="btn">&nbsp;one</label>
<label class="btn" title="I'm a tooltip!"><input class="uk-radio" type="radio" name="radio17" data-toggle="btn">&nbsp;two</label>
<label class="btn" title="I'm a tooltip!"><input class="uk-radio" type="radio" name="radio17" data-toggle="btn">&nbsp;three</label>
<label class="btn" title="I'm a tooltip!"><input class="uk-radio" type="radio" name="radio17" data-toggle="btn">&nbsp;four</label>
<label class="btn" title="I'm a tooltip!"><input class="uk-radio" type="radio" name="radio17" data-toggle="btn">&nbsp;five</label>
<div id="template" style="display: none;">
<img src="https://static.eldorado.ru/upload/iblock/0cf/0cfd8b4bd9c644e36b0fea51fa0b9015.jpg/resize/380x150/">
</div>

tippy('.btn', {
animation: 'fade', // 'shift-toward', 'fade', 'scale', 'perspective'
flipBehavior: 'counterclockwise', // 'clockwise', 'counterclockwise', Array
 inertia: true,
placement: 'left',
  html: '#template',
distance: 30,
})

Каким способом я могу привязать к каждому радиобоксу отдельную картинку? Желательно бы еще узнать как спрятать border, когда появляется тултип с картинкой, но это не критично. Не могу додуматься именно по картинкам.

Answer 1

Изменил ваш пример на CodePen. Таким образом вы можете привязать ссылку на изображение к таргету и при срабатывании события onShow обновлять изображение.

const tip = tippy('.btn', { 
    animation: 'fade', // 'shift-toward', 'fade', 'scale', 'perspective' 
    flipBehavior: 'counterclockwise', // 'clockwise', 'counterclockwise', Array 
     inertia: true, 
    placement: 'left', 
      html: '#template', 
    distance: 30, 
    onShow(instance) { 
      const content = $(this).find('.tippy-content') 
      let new_src = $(instance.reference).find('input').attr('data-src') 
      if (tip.loading) return 
 
      tip.loading = true 
       
      let img = new Image(); 
      img.onload = function() { 
        tip.loading = false 
      } 
      img.src = new_src; 
      img.width = 200; 
      img.height = 200; 
      content.html(img) 
    } 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://unpkg.com/tippy.js@2.5.3/dist/tippy.all.min.js"></script> 
 
<label class="btn" title="I'm a tooltip!"><input class="uk-radio" type="radio" name="radio17" data-toggle="btn" data-src="https://st3.depositphotos.com/1031481/18365/i/1600/depositphotos_183650808-stock-photo-maine-coon-on-a-red.jpg">&nbsp;one</label> 
<label class="btn" title="I'm a tooltip!"><input class="uk-radio" type="radio" name="radio17" data-toggle="btn" data-src="https://static.eldorado.ru/upload/iblock/0cf/0cfd8b4bd9c644e36b0fea51fa0b9015.jpg/resize/380x150/">&nbsp;two</label> 
<label class="btn" title="I'm a tooltip!"><input class="uk-radio" type="radio" name="radio17" data-toggle="btn" data-src="https://st3.depositphotos.com/16149430/18766/i/1600/depositphotos_187660520-stock-photo-yacht.jpg">&nbsp;three</label> 
 
<div id="template" style="display: none;"> 
</div>