How to Add HTML Inside a Title Attribute

Is it possible to add html inside a title attribute?

Nope. You'd need to create your own title substitute with JavaScript.

Allow html in an a tag title attribute

As per the comments, looking at the Bootstrap documentation for Tooltips;

https://v4-alpha.getbootstrap.com/components/tooltips/#interactive-demo

And with custom HTML added:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>

You require the data-html="true" attribute to be placed on the <a> element.

Adding html tags inside title attribute of anchor tag

So you are using a plugin that reads the title attribute of an a element and constructs a presentation where that value is used as a visible title for an image. And you want that value to contain an a element, but you don’t want the markup to appear when the user mouses over the image

This is a feature of the plugin you are using. Modify it, or find a different plugin that suits your needs. If the visible title may need to contain HTML markup, a different approach is needed (unless you want the markup to be shown on mouseover). For example, you could make the plugin use data-title (perhaps falling back to title if data-title is not present.

The title attribute value is by definition just text (except that character references are interpreted), and this is how browsers treat it.

Using HTML in Span title attribute

No. The title attribute only outputs text it does not render html.

How to add title attribute on HTML element with TypeScript

1. Get the element with id: "first_span" via @ViewChild.

2. In mouseover method, check toolTip has value and the element (from 1) is existed, then add the "title" attribute.

3. In out method, check the element (from 1) has existed and the element has the "title" attribute, then remove the "title" attribute from the element.

<span #first_span class="first-span" (mouseover)="mouseover(params)" (mouseout)="out()">
  {{params.valueFormatted ? params.valueFormatted : params.value}}
</span>

import { ElementRef, ViewChild } from '@angular/core';

@ViewChild('first_span') elem: ElementRef;

async mouseover(params) {
  this.handle = setTimeout(() => {
    this.checkSaldo(10, 'FRA').then((x) => {
      this.toolTip = x;
      this.show = true;

      if (this.toolTip && this.elem && this.elem.nativeElement)
        this.elem.nativeElement.setAttribute('title', this.toolTip);
    });
  }, 4000);
}

out() {
  this.show = false;
  this.toolTip = null;

  if (this.elem && this.elem.nativeElement) {
    let element = this.elem.nativeElement as HTMLElement;

    element.attributes.getNamedItem('title') &&
      element.attributes.removeNamedItem('title');
  }

  clearTimeout(this.handle);
}

Sample StackBlitz Demo

How to set title attribute for HTML element dynamically?

Yes, it is possible.
On page load simply set it like:

 document.getElementById('YOURID').setAttribute('title', 'NEW TITLE');

EDIT :
Based on the comment, I got that you want to set the title of all elements same as their ID. Let's say you want to do it only within your body tag, then your code will look like:

var children = document.getElementsByTagName("body").getElementsByTagName('*');
//Now children variable has all DOM elements inside `body`
 for (i = 0; i < children.length; ++i) {
 var ele = children[i];
 ele.setAttribute('title',ele.getAttribute("id"));
}

You may want to place some checks before assigning any value or prevent in errors in console.

---

Related Topics