0

I am trying to use tooltips with bootstrap. I have a sentence and want only one word in bold but it keeps showing up as plain text with tags.

I have used data-html ="true" but it doesn't change anything.

<p title="This is the sentence that I want to show with the <strong> tooltip </strong>" data-html="true">
                        Hover here
                    </p>
HopelessStudent
  • 49
  • 4
  • https://stackoverflow.com/questions/13704789/can-i-use-complex-html-with-twitter-bootstraps-tooltip. Would this fix your issue ? – Abin Thaha Aug 11 '21 at 06:50
  • Unfortunately it does not. styling keeps showing up as plain text – HopelessStudent Aug 11 '21 at 06:57
  • 1
    which is the version of bootstrap you are using ? i guess you need to add data-toggle="tooltip" for it to be considered as a tooltip so the data-html will work – Mihai T Aug 11 '21 at 06:59
  • I am using bootstrap v3. tried data-toggle="tooltip" and data-bs-toggle="tooltip". Nothing seems to be working – HopelessStudent Aug 11 '21 at 07:03
  • does the actual tooltip work ? the basic functionality ? if not, did you add jquery to your project ? – Mihai T Aug 11 '21 at 07:12
  • Whenever I hover, the tooltip works, but if I have any styling tags, they are being rendered as plain text even though I am using data-html="true" – HopelessStudent Aug 11 '21 at 07:14
  • https://jsfiddle.net/lalji1051/vj0du5ko/1/ – Lalji Tadhani Aug 11 '21 at 07:17
  • Does the bootstrap tooltip work ? or it just shows the default title 'tooltip ' ? I guess it just shows the default html 'title tooltip' which is not the tooltip you want. Please add jquery to your project ( as it's a bs3 dependency when using tooltips ) and add the tooltip method to your element `$("[data-toggle=tooltip]").tooltip();` – Mihai T Aug 11 '21 at 07:24

3 Answers3

0

call this function

<p title="This is the sentence that I want to show with the <strong> tooltip </strong>" data-toggle="tooltip" data-html="true">Hover here</p>

$("[data-toggle=tooltip]").tooltip();

https://jsfiddle.net/lalji1051/vj0du5ko/2/

Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
0

tooltip " data-toggle="tooltip"data-html="true"> Hover here

$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip(); });
Karan Patel
  • 1
  • 1
-2

tooltip " data-toggle="tooltip"data-html="true">Hover here

Karan Patel
  • 1
  • 1