CODEWITHSUNDEEP
jqueryhtmljquery-uitooltip
Juno J
Juno J

Reputation: 197

How to use HTML in the tooltip?

HTML is not working in data-toggle="tooltip" What's the problem?

I thought data-html="true" activates html in the tooltip, but it's not..

In HTML,

<td class="can_filter"><a href="{{ route('participants.create', $event->id) }}" 
data-toggle="tooltip" data-html="true" title="
<ul>
@foreach ($array as $key=>$value)
    <li>{{ $key }} : {{ $value }}</li>
@endforeach
</ul>"> {{ $event->title }} </a></td>

If I add this code, tooltip ain't working. 

 $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip({
         html: true,
         content: function() {
         return $('#tooltip-content').html();
         }
     });
 });

<head> of base.blade.php file just for reference!

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DemoProject!!</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="{{ asset('js/JSfeatures_DP.js') }}"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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.0/js/bootstrap.min.js"></script>
<script src="{{ asset('js/app.js') }}" type="text/js"></script>
<div class="container">
        @yield('main')
</div>
<button style="margin: 19px;" class="btn btn-dark" name="mode" value="light" onclick="
    Darkmode(this);
">Darkmode</button>
</head>

As is: HTML tags are exposed in the tooltip.

<ul>
  <li> key1 : value1 </li>
  <li> key2 : value2 </li>
</ul>

To be:

Thank you in advance!

Upvotes: 1

Views: 3116

Answers (3)

Twisty
Twisty

Reputation: 30893

You should not store HTML in an attribute, this is not good practice. I would advise some type of data string that can be converted into HTML using the content function. It might also be best to create a PHP API that JavaScript can Post / Get to get data when needed.

Consider the following.

$(function() {
  $(".can_filter").tooltip({
    items: "a[data-tooltip]",
    content: function() {
      var item = $(this);
      var data = item.data("tooltip");
      if (item.data("tooltip-type") == "list") {
        var list = $("<ul>");
        $.each(data, function(k, v) {
          $("<li>").html(k + " : " + v).appendTo(list);
        });
        return list;
      } else {
        return data;
      }
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container">
  <table>
    <tr>
      <td class="can_filter"><a href="#" data-tooltip='{"key 1":"value 1","key 2":"value 2"}' data-tooltip-type="list">Link 1</a></td>
    </tr>
    <tr>
      <td class="can_filter"><a href="#" data-tooltip='Take me home'>Link 2</a></td>
    </tr>
  </table>
</div>
<button style="margin: 19px;" class="btn btn-dark" name="mode" value="light">Darkmode</button>

Here we can see how to use the data attribute to our advantage. Using this, I can store a string of data in JSON Object format and this can be read into the content. You could also perform an AJAX Get to collect this data from an API in a similar manner.

Upvotes: 1

user12013126
user12013126

Reputation:

Try this for a pure CSS solution.

  <div class="hover">Hover
        <div class="tooltip">Easy as... <ul>
        <li>One</li>
        <li>Two</li>
        <li>Four..</li>
        <li>Three sir!</li>
        </ul>
        </div>
    </div>

.hover {
    position:relative;
    top:50px;
    left:50px;
}

.tooltip {
  top:-10px;
  background-color:black;
  color:white;
  border-radius:5px;
  opacity:0;
  position:absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition:  opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition:  opacity 0.5s;
  transition:  opacity 0.5s;
}

.hover:hover .tooltip {
    opacity:1;
}

Fiddle

Upvotes: 0

Tec J
Tec J

Reputation: 118

You can show tooltip by below method.

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>

<a href="#" class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</a>

Upvotes: 0

Related Questions