На других html компонентах, таких как кнопки или атрибуты-подсказки для переключения данных с уникальным дизайном, работают нормально, см. Ссылку ниже как ссылку:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip&stacked=h
Однако, если я собираюсь реализовать динамический c выпадающий или простой компонент, дизайн из всплывающей подсказки исчезнет, и он станет простым, что-то вроде этого:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); }); </script>> <select> <option data-toggle="tooltip" title="Hooray1">Hooray1</option> <option data-toggle="tooltip" title="Hooray2">Hooray2</option> <option data-toggle="tooltip" title="Hooray3">Hooray3</option> </select>
Любое предложение или прокомментируйте, как иметь уникальную подсказку дизайна в выпадающем списке. Моя цель - иметь всплывающую подсказку с комбинацией текста и изображения, когда пользователь наводит курсор на каждое значение в раскрывающемся списке. ТИА
$('a[data-toggle="tooltip"]').tooltip({ animated: 'fade', placement: 'top', html: true });
.avatar { vertical-align: middle; width: 50px; height: 50px; border-radius: 50%; }
<!DOCTYPE html> <html lang="en"> <head> <title>Simple Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <a href="#" data-toggle="tooltip" title="<img class='avatar' src='https://www.w3schools.com/w3images/avatar5.png'/> <span><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</span>"> Anonymous </a>
почему бы вам не попробовать последнюю версию bootstrap, но это нормально, попробуйте это ... Надеюсь, это поможет
Согласно bootstrap Документация, вам необходимо включить popper.min.js перед bootstrap.js для:
popper.min.js
bootstrap.js
Bootstrap Документация: https://getbootstrap.com/docs/4.2/getting-started/introduction/#js
У меня есть нечто похожее на то, что вы хотите, проверьте здесь: { ссылка }