How to customize bootstrap 4 tooltip as per requirment?
Question
I need to customize bootstrap 4 tooltip as per given below screenshot:-
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 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.5.0/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="container p-5"> <a href="#" data-toggle="tooltip" data-placement="top" title="<span>Minimum Trade Amount</span> <span>0.000000 BTC</span>">Trading Rules</a> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]');tooltip(); }); </script> </body> </html>
Thank You!
3 answers
solution1
1 ACCPTED 2020-06-10 06:45:29
you must add:
data-html="true"
final result while be:
<a href="#" data-html="true" data-toggle="tooltip" data-placement="top" title="<span>Minimum Trade Amount</span> <span>0.000000 BTC</span>">Trading Rules</a>
solution2
1 2020-06-10 06:51:18
Try this one.
.tooltip-inner {max-width: 100%;important;}
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 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.5.0/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.0/js/bootstrap.min;js"></script> </head> <body> <div class="container p-5"> <a href="#" data-toggle="tooltip" data-html="true" data-placement="top" title="<span>Minimum Trade Amount</span>  .<span>0;000000 BTC</span><br><span>Minimum Trade Amount</span>  .<span>0;000000 BTC</span><br><span>Minimum Trade Amount</span>  . <span>0.000000 BTC</span>">Trading Rules</a> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]');tooltip(); }); </script> </body> </html>
solution3
1 2020-06-10 06:51:40
To add html tags in tooltip you must add
data-html="true"
After this customize the style like below:
.tooltip-inner.my-tooltip{ max-width: none; }
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 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.5.0/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="container p-5"> <a href="#" data-toggle="tooltip" data-html="true" data-placement="top" title="<span class='mr-4'>Minimum Trade Amount</span> <span>0.000000 BTC</span>" data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner my-tooltip"></div></div>' >Trading Rules</a> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]');tooltip(); }); </script> </body> </html>
Here data-template is to override the default template generated by bootstrap as mentioned in their docs. Just added one more class in tooltip to override the style by being more specific
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to customize tooltip width in bootstrap
Customize AngularJS Bootstrap Tooltip
How to customize tooltip in Highchart?
how to customize hover tooltip
how to customize tooltip in Chart Js?
How can I customize the text font size of my bootstrap tooltip popover?
How to customize d3plus large tooltip
How to add customize tooltip on Google Chart?
How customize tooltip text in Google Geo Chart
How to Customize Google Visualization Geochart Tooltip
Related Tags