Автоматическая всплывающая подсказка

ProgramBox

Автоматическая всплывающая подсказка

Post author:admin
Запись опубликована:30 августа, 2022
Post category:Вопросы по программированию

#javascript #css

Вопрос:

Я создал всплывающую подсказку с использованием 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>

Этот код в порядке, но кто-нибудь может сказать мне, как сделать это автоматически?

1. Пожалуйста, определите «автоматический». На примере веб-сайта я вижу временные текстовые шары. Это то, что вы подразумеваете под автоматической: чтобы каждая всплывающая подсказка появлялась и исчезала через указанное количество секунд после загрузки страницы?

2. да @ Ruud Helderman

Ответ №1:

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

Ответ №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>

Ответ №3:

Мое время, когда я использовал jQuery, прошло совсем недавно. Но я думаю, что это должно сработать так, как вы хотите.

Я проверил документы API здесь

 $(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);
});

1. Ничего не произошло ни с одним решением, ребята

2. @errajkumar Хорошо. Я попробовал это сделать, используя предоставленные функции. Но это невозможно. Теперь я запускаю некоторые пользовательские события. Это не лучший способ, но он работает.

Ответ №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>

Метки: Автоматическая всплывающая подсказка