Если вы разрабатываете программное обеспечение: используйте java-launcher. Я использовал несколько своих приложений [Exe4j] [ http://www.ej-technologies.com/products/exe4j/overview.html] , и он работал очень хорошо. Когда приложение запускается, оно отображается как, например, «myserverapp.exe» или «myapp» в диспетчере задач Windows. Есть и другие lauchers (не знают их наизусть), некоторые из них могут быть бесплатными тоже.
Использование Bootstrap 4.0.0
.tooltip-inner
позволит нам изменить цвет фона всплывающей подсказки.
Также убедитесь, что вы следуете обзору всплывающих подсказок из документации по Bootstrap.
blockquote>
- Подсказки для позиционирования используют стороннюю библиотеку Popper.js. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js, чтобы всплывающие подсказки работали!
- Подсказки доступны по соображениям производительности, поэтому вы должны инициализировать их самостоятельно.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <span href="#" data-toggle="tooltip" data-placement="bottom" title="Some tooltip text!">Hover over me</span> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script> $(function() { $('[data-toggle="tooltip"]').tooltip() }) </script> <style> .tooltip-inner { background-color: red; } .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: red !important; } </style> </body> </html>
Если вы хотите применить определенный стиль только к одной подсказке при наведении на нее, я надеюсь, что это поможет вам.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<body>
<span id="myTooltip" class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<style>
.red {
background-color: red !important;
}
</style>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
// for store a random Id, we will use it to remove
// the style we append to the document on tooltip hover
var randomId;
// get the tooltip to apply the style
$('#myTooltip').hover((event) => {
if (event.type == 'mouseenter' || event.type == 'mouseover') {
// generate random Id and append the style to head
randomId = 'tooltip' + Math.floor(Math.random() * 100) + 1;
// append the style to the head
$('head').append(
`<style data-remove="${randomId}">
.tooltip-inner{
background-color: red;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: red !important;
}
</style>`
);
}
else if (event.type == 'mouseout' || event.type == 'mouseleave') {
// we remove the style so doesn't effect other tooltip,
// we wait to the tooltip fade
setTimeout(() => {
$(`[data-remove="${randomId}"]`).remove();
}, 100)
}
})
</script>
</body>
</html>