Displaying Tooltip on Mouse Hover of a Text

tooltip to work for mouse hover and click both - ngbootstrap

You can use the context and manual triggers functionality of ngb-tooltip to achieve this.

In your HTML, define the tooltip:

<ng-template #tipContent let-greeting="greeting">{{greeting}}</ng-template>

The above HTML will display the value of the variable greeting as the text in the tooltip.

Also define the button (or other HTML) element that you want the tooltip to appear on

<button
  type="button"
  class="btn btn-outline-secondary mr-2"
  [ngbTooltip]="tipContent"
  triggers="manual"
  #t1="ngbTooltip"
  (mouseover)="openTooltip(t1, 'text 1')"
  (mouseout)="closeTooltip(t1)"
  (click)="openTooltip(t1, 'text 2')">
      Tooltip on top
</button>

This uses manual triggers, and you can bind to the mouseover and mouseout events to display the tooltip text 1 on hovering over the button. The click binding will display the tooltip text 2 when clicking on the button.

The openTooltip function is defined in the TypeScript file opens the tooltip passing in the text that was passed in as an argument to the method. The line tooltip.close() is required otherwise the clicking on the button to display the text 2 tooltip will not work:

openTooltip(tooltip, greeting: string) {
  tooltip.close();
  tooltip.open({ greeting });
}

There's a working StackBlitz demo here.

The closeTooltip function simply closes the tooltip:

closeTooltip(tooltip) {
  tooltip.close();
}

Displaying ToolTip to MouseHover Text

It's a little simple. You have to use the GetCharIndexFromPosition method of your RichTextBox to get the Char index under the Mouse Pointer, make some simple loops to find the whole word and then show it in a Tooltip popup normally. Here is the code:

    string punctuations = " ,.;!?'\")]}\n";
    //This saves your words with their corresponding definitions/details
    Dictionary<string, string> dict = new Dictionary<string, string>(StringComparer.CurrentCultureIgnoreCase);
    ToolTip tt = new ToolTip();
    int k;
    int lineBreakIndex = 60;
    int textHeight;
    //MouseMove event handler for your richTextBox1
    private void richTextBox1_MouseMove(object sender, MouseEventArgs e){
        if (richTextBox1.TextLength == 0) return;
        Point lastCharPoint = richTextBox1.GetPositionFromCharIndex(richTextBox1.TextLength - 1);
        if (e.Y > textHeight ||  (e.Y  >= lastCharPoint.Y && e.X > lastCharPoint.X + textHeight - lastCharPoint.Y))            
        {
            tt.Hide(richTextBox1);
            k = -1;
            return;
        } 
        int i = richTextBox1.GetCharIndexFromPosition(e.Location);            
        int m = i, n = i;
        while (m>-1&&!punctuations.Contains(richTextBox1.Text[m])) m--;            
        m++;
        while (n<richTextBox1.TextLength&&!punctuations.Contains(richTextBox1.Text[n])) n++;
        if (n > m){
            string word = richTextBox1.Text.Substring(m, n - m);
            if (dict.ContainsKey(word)){
                if (k != m){
                    tt.ToolTipTitle = word;
                    tt.Show(dict[word], richTextBox1, e.X, e.Y + 10);
                    k = m;
                }
            }
            else{
                tt.Hide(richTextBox1);
                k = -1;
            }
        }
    }
    //This will get the entry text with lines broken.
    private string GetEntryText(string key){
        string s = dict[key];
        int lastLineEnd = lineBreakIndex;
        for (int i = lastLineEnd; i < s.Length; i += lineBreakIndex)
        {
            while (s[i] != ' '){
                if (--i < 0) break;                    
            }
            i++;
            s = s.Insert(i, "\n");
            lastLineEnd = i+1;
        }
        return s;
    }
    //MouseLeave event handler for your richTextBox1
    private void richTextBox1_MouseLeave(object sender, EventArgs e){
        tt.Hide(richTextBox1);
        k = -1;
    }
    //ContentsResized event handler for your richTextBox1
    private void richTextBox1_ContentsResized(object sender, ContentsResizedEventArgs e)
    {
        textHeight = e.NewRectangle.Height;
    }
    //Here are some sample words with definitions:
    dict.Add("world", "- World is a common name for the whole of human civilization, specifically human experience, history, or the human condition in general, worldwide, i.e. anywhere on Earth.");
    dict.Add("geek", "- A person who is single-minded or accomplished in scientific or technical pursuits but is felt to be socially inept");

enter image description here

HTML element to display tooltip on hover

You can try updating the title property on those elements. One thing to note is that HTML tags will appear in lowercase when compiled.

$(document).ready(function() {  var style = document.createElement('style');  style.type = 'text/css';  $('head')[0].appendChild(style);  style.innerHTML =     `action, quantifier {      position: relative;      display: inline-block;      margin-top: 20px;    }
    action[title]:hover:after, quantifier[title]:hover:after {      content: attr(title);        position: absolute;      top: -100%;      left: 0;    }
    action[title]:hover:after {      color: red;      border: solid 1px black;    }
    quantifier[title]:hover:after {      color: blue;      border: solid 1px black;    }`;
  $('action')[0].title = 'Action';  $('quantifier')[0].title = 'Quantifier';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body>One string that <Action>should</Action> work is <Quantifier>approximate number of</Quantifier> other things.</body>

How to display value from object in tooltip on mouseover?

Without knowing anything about your data structure, data delivery method, etc etc etc and basically being an overly broad question all together that could very well be closed for such, here's a quickie example of something you could do that on modern evergreen browsers should do just fine even with hundred+ elements.

It's just a proof-of-concept example, anything more most folks will charge you for their time for since it's generally out-of-scope for a quickie Q&A site but might get your creativity flowing. You could also change to mouseover event and just display the tooltip in static position from where the event began. Cheers.

const tooltip = document.getElementById('tooltip-example'),
      dummyData = [
  {
    "id": "0",
    "name": "Mickey Mouse",
    "attack": "melee",
    "damage": "42",
    "range": "157",
    "defense": "turrets",
    "faction": "lost souls"
  },
  {
    "id": "1",
    "name": "Tinker Bell",
    "attack": "sword",
    "damage": "34",
    "range": "157",
    "defense": "cannons",
    "faction": "south side"
  },
  {
    "id": "2",
    "name": "Goofy",
    "attack": "archer",
    "damage": "55",
    "range": "987",
    "defense": "tigers",
    "faction": "westside"
  },
  {
    "id": "3",
    "name": "Donald Duck",
    "attack": "fire",
    "damage": "97",
    "range": "533",
    "defense": "bears",
    "faction": "killer koalas"
  },
  {
    "id": "4",
    "name": "Minnie Mouse",
    "attack": "roundhouse",
    "damage": "76",
    "range": "234",
    "defense": "squirrels",
    "faction": "rabid kittens"
  },
  {
    "id": "5",
    "name": "Daisy Duck",
    "attack": "lightning",
    "damage": "45",
    "range": "534",
    "defense": "looks",
    "faction": "angry puppies"
  }
];

handleEvents = () => {
  const items = document.querySelectorAll('[data-attribs]');
  
  items.forEach(
    item => item.addEventListener('mousemove', function (e) {
    
    tooltip.style.display = 'block';
    
    let x = event.clientX,
        y = event.clientY;
        
    const attribs = JSON.parse(e.target.dataset.attribs);
    
    tooltip.style.left = `${x}px`;
    tooltip.style.top = `${y}px`;
    tooltip.innerHTML = `
      <table>
        <tr><td>Name [id]</td><td>${attribs.name} [${attribs.id}]</td></tr>
        <tr><td>Attack</td><td>${attribs.attack}</td></tr>
        <tr><td>Damage</td><td>${attribs.damage}</td></tr>
        <tr><td>Range</td><td>${attribs.range}</td></tr>
        <tr><td>Defense</td><td>${attribs.defense}</td></tr>
        <tr><td>Faction</td><td>${attribs.faction}</td></tr>
      </table>
    `;
    
    
  }));
 
  items.forEach(
    item => item.addEventListener('mouseout', function (e) {
      tooltip.style.display = 'none';
  }));
  
}

generateItems = () => {

  for (let i = 0, x = dummyData.length; i < x; i++) {
  
    const newItem = document.createElement('div');
    newItem.className = 'default-item';
    newItem.style.backgroundColor = `#${(Math.random()*0xFFFFFF<<0).toString(16)}`;
    newItem.style.color = "#000";
    newItem.innerText = dummyData[i].name;
    newItem.dataset.attribs = JSON.stringify(dummyData[i]);
    document.body.appendChild(newItem);
  
  }
  
  handleEvents();
}

generateItems();

body {
  padding: 2rem;
}

.default-item {
  display: inline-block;
  padding: .5rem;
  margin: .25rem;
  color: #212121;
  cursor: pointer;
  border: #212121 1px solid;
}

#tooltip-example {
  color: #fff;
  background-color: rgba(0,0,0,.8);
  position: absolute;
  z-index: 99999999;
  cursor: pointer;
  padding: .5rem;
  pointer-events: none;
  display: none;
}

#tooltip-example table {
  border-collapse: collapse;
}

#tooltip-example table td {
  padding: .15rem .5rem;
  white-space: nowrap;
}

#tooltip-example table td:first-child {
  text-align: right;
  border-right: #fff 1px solid;
}

<div id="tooltip-example"></div>

How to get a tooltip to show when users hover over a div with a certain class and not show on others

what you can do is, give that div an id, and through css hover, set the tooltip's display to block,

or you can use, javascript for this, regidter those divs with a on hover, function , check the target of the hovered element, if it matches with that one, set tooltip's div display property to block,,simple

Html hover tooltip is displaying below other layers. How to move it to the top?

The tooltip is show below the hovered cell because you defined for it top: 2.2em. But you can define top also to be negative to show the tooltip above the hovered cell.

Since you defined position: sticky for every th the tooltips for the thead are not big enough for such a big tooltip like for the cell "2021". You could remove the position definition for the ths to show the full size tooltip. For the thead to be sticky it is enough to define it only for the first th.

th:first-child { 
  position: sticky; 
}

By the way, there was a mistake in your CSS:

text-decoration: none z-index: 2;

These are two separate statements, so the following is correct:

text-decoration: none;
z-index: 2;

Working example:

table,
td,
th {
  font-family: trial;
  border: 0px solid #fff;
  padding: 6px;
  text-align: center;
  color: #fff font-size: 11px;
}

th {
  left: 0;
  font-family: trial-bold;
  z-index: 20;
  background-color: #e72076;
  font-size: 11px;
  color: #fff
}

th:first-child { 
  position: sticky; 
} 

table {
  margin-left: 10px;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 11px;
  margin-bottom: 8px;
  color: #fff
}

tr:nth-child(odd) {
  background-color: #20323f;
}

tr:nth-child(even) {
  background-color: #20323f;
}

tr {
  border-bottom: 1px solid #e72076;
}

td:nth-last-child(5n+1) {
  border-right: 1px solid #e72076;
}

th:nth-child(6n+1) {
  border-right: 0px solid #fff
}

body {
  margin: 0;
  font-family: trial;
}

th.tip {
  text-decoration: none;
  z-index: 2;
}

th.tip:hover {
  position: relative
}

th.tip span {
  display: none
}

th.tip:hover span {
  width: 170px;
  border: #fff 1px;
  padding: 5px 20px 5px 5px;
  display: block;
  z-index: 2147483647;
  background: #20323f;
  left: 0px;
  margin: 10px;
  position: absolute;
  top: 2.2em;
  text-decoration: none;
}

td.right_border {
  border-right: 1px solid #e72076;
}

td.tip {
  text-decoration: none
}

td.tip:hover {
  position: relative
}

td.tip span {
  display: none
}

td.tip:hover span {
  width: 170px;
  border: #fff 1px;
  padding: 5px 20px 5px 5px;
  display: block;
  z-index: 100;
  background: #20323f;
  left: 0px;
  margin: 10px;
  position: absolute;
  top: -2.2em;
  text-decoration: none;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th class="tip" colspan="5" halign="left">2021<span>........ ............................................. .................................2021-01-21-2021-02-05</span></th>
      <th class="tip" colspan="5" halign="left">2020<span>........ ............................................. .................................2020-04-01-2020-06-30</span></th>
      <th colspan="5" halign="left" style="border-right: 0px solid #ccc">2019</th>
      <th colspan="5" halign="left" style="border-right: 0px solid #ccc">2018</th>
      <th colspan="5" halign="left" style="border-right: 0px solid #ccc">2017</th>
    </tr>
    <tr>
      <th></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
      <th>echo</th>
      <th>interview</th>
      <th>success</th>
      <th>hired</th>
      <th class="tip">funnel<span>echo -> hired rate in ‱ (...)</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>total</th>
      <td>38</td>
      <td>7</td>
      <td>3</td>
      <td class="tip">2 (2 / 0 / 0)<span>hired total (juniors / mids / seniors)</span></td>
      <td class="tip">526 (18 - 43 - 67)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>10</td>
      <td>1</td>
      <td>1</td>
      <td class="tip">1 (1 / 0 / 0)<span>hired total</span></td>
      <td class="tip">1000 (10 - 100 - 100)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>9</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 / 0 / 0)<span>hired total</span></td>
      <td class="tip">1111 (0 - 0 - 100)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>1</td>
      <td>0</td>
      <td>1</td>
      <td class="tip">1 (1 / 0 / 0)<span>hired</span></td>
      <td class="tip">0 (0 - 0 - 0)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 / 0 / 0)<span>hired</span></td>
      <td class="tip">0 (0 - 0 - 0)<span>hired rate in ‱ (...)</span></td>
    </tr>
    <tr>
      <th>LinkedIn</th>
      <td>23</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 - 0 - 0)<span>echo -> hired rate in ‱ (...)</span></td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 - 0 - 0)<span>hired rate in ‱ (...)</span></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td class="tip">0 (0 - 0 - 0)<span>echo -> hired rate in ‱ (echo -> interview rate in % - inteview -> success rate in % / success -> hired rate in %)</span></td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Display Tooltip after a Click instead when Hover

Got it. It was hiding in the demoes.js file.

And especially that line:

<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>

This is the corrected code:

<script src="https://clipboardjs.com/assets/scripts/demos.js"></script>
<div id="example-text" class="example">
<button class="btn" data-clipboard-demo="" data-clipboard-action="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">Copy to clipboard</button>
</div>

    <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

Now it is working.
Here's the result: HERE