Question

我使用javascript制作了一个工具提示，这非常好。但是现在我希望该工具提示能够自动和手动运行。现在，自动均值，您可以检查此链接。 https://www.adda247.com/。

这是我正在使用的示例代码。

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() { $('[data-toggle="t1"]').tooltip(); });
    $(document).ready(function() { $('[data-toggle="t2"]').tooltip(); });
    $(document).ready(function() { $('[data-toggle="t3"]').tooltip(); });
    $(document).ready(function() { $('[data-toggle="t4"]').tooltip(); });
  </script>
</head>

<body>
  <br><br><br><br><br><br><br><br>

  <div class="row">

    <div class="col-md-2 col-xs-3">
      <img src="img/s6.svg" height="400px" title="I became f!" data-toggle="t1">
    </div>
    <div class="col-md-2 col-xs-3">
      <img src="img/s7.svg" height="350px" title="I became g!" data-toggle="t4">
    </div>
    <div class="col-md-2 col-xs-3">
      <img src="img/s3.svg" height="300px" title="I became c!" data-toggle="t3">
    </div>
    <div class="col-md-2 col-xs-3">
      <img src="img/s4.svg" height="250px" title="I became c!" data-toggle="t2">
    </div>

  </div>
</body>

</html>

此代码还可以，但是有人可以告诉我如何自动执行吗？

Answer 1

$(document).ready(function(){
    $('[data-toggle]').each(function(){
      $(this).tooltip();
    });
});

Answer 2

您可以简单地在tooltip上调用document，而不必为每个元素调用。

$( document ).tooltip();

  div {
    display: inline-block;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div class="col-md-2 col-xs-3"><img src="img/s6.svg" height="400px" title="I became f!" data-toggle="t1"></div>
    <div class="col-md-2 col-xs-3"><img src="img/s7.svg" height="350px" title="I became g!" data-toggle="t4"></div>
    <div class="col-md-2 col-xs-3"><img src="img/s3.svg" height="300px" title="I became c!" data-toggle="t3"></div>
    <div class="col-md-2 col-xs-3"><img src="img/s4.svg" height="250px" title="I became h!" data-toggle="t2"></div>

</div>

Answer 3

我使用jQuery的时间是前一段时间。但是我认为这应该像您想要的那样工作。

我检查了API docs here

$(document).ready(function () {
    // get all toggle elements
    const toggleElements = document.querySelectorAll('[data-toggle]');

    // initialize tooltips
    toggleElements.forEach(toggleElement => $(toggleElement).tooltip());

    let autoToggle = -1; // index of current toggle
    const intervalTime = 1000; // ms

    setInterval(() => {

        // disable last tooltip
        const oldToggle = toggleElements[autoToggle];
        if (oldToggle) {
            oldToggle.dispatchEvent(new MouseEvent('mouseout'))
        }

        // enable next tooltip
        autoToggle = (autoToggle + 1) % toggleElements.length;
        const newToggle = toggleElements[autoToggle];
        newToggle.dispatchEvent(new MouseEvent('mouseover'))

    }, intervalTime);
});

Answer 4

如果希望该工具提示自动运行，则需要将触发器设置为手动，然后可以在页面加载时触发它。但是，如果您希望该工具提示自动和手动运行，请执行以下操作：

var tindex = 0;
var oldtindex = 0;

$( document ).ready( function() {
    var ttips = $('[data-toggle]');

    /*ttips.tooltip( { trigger: 'manual' } );*/

    setInterval(function(){
        ttips.eq( oldtindex ).tooltip().mouseout();
        ttips.eq( tindex ).tooltip().mouseover();
        oldtindex = tindex;
        tindex += 1;
        if ( tindex == ttips.length ) tindex = 0
    }, 2000 );
} );

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<br><br><br><br><br>
<div class="row">
    <div class="col-md-2 col-xs-3">
        <img src="https://static.adda247.com/images/ic-student-6.svg" height="400px" title="I became f!" data-toggle="t1">
    </div>
    <div class="col-md-2 col-xs-3">
        <img src="https://static.adda247.com/images/ic-student-7.svg" height="350px" title="I became g!" data-toggle="t4">
    </div>
    <div class="col-md-2 col-xs-3">
        <img src="https://static.adda247.com/images/ic-student-3.svg" height="300px" title="I became c!" data-toggle="t3">
    </div>
    <div class="col-md-2 col-xs-3">
        <img src="https://static.adda247.com/images/ic-student-4.svg" height="250px" title="I became c!" data-toggle="t2">
    </div>
</div>

自动工具提示

4 个答案: