主页 / 问题 / 847924
Accepted
aloe
Asked:2020-06-28 21:39:29 +0000 UTC2020-06-28 21:39:29 +0000 UTC

tippy.js 将图像绑定到工具提示

  • 772

我正在使用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,
})

如何将单独的图像附加到每个单选框？当带有图像的工具提示出现时，知道如何隐藏边框也很好，但这并不重要。我无法从图片中下定决心。

javascript

1 个回答

  1. Best Answer

    将您的示例更改为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>

    • 1

相关问题