Menu
Is there a way to add HTML markup to the tooltip in materialize? I'm trying to arrange some data as definition list inside a tooltip. I tried to add it directly into the data-tooltip attribute but it doesn't seem to recognize the tags.
409
asked Aug 19 '15 14:08
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
HTML title Attribute The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
Tooltips display text (or other content) when you hover over an HTML element. The w3-tooltip class defines the element to hover over (the tooltip container). The w3-text class defines the tooltip text.
Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize UI components help in constructing attractive, consistent, and functional web pages and web apps, while adhering to modern web design principles such as browser portability, device independence, and graceful degradation.
In materialize.js, around line 1258 make the following change to covert all tooltips to html.
// Change .text()
newTooltip.children('span').text(origin.attr('data-tooltip'));
// To .html()
newTooltip.children('span').html(origin.attr('data-tooltip'));
In the latest version you can use:
$(document).ready(function(){
$('.tooltipped').tooltip({delay: 50, tooltip: 'some text', html: true});
});
See http://materializecss.com/dialogs.html
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
