Is there any way to make a standard browser tooltip appear without putting the text in the title tag and without tooltip plug-in?

Asked

Viewed 2,236 times

5

I am asking this because the application is almost ready and used a plug-in that uses the tag title. This plugin causes clicking on the element to open a popup (in this case a confirmation box), with a title bar using the title tag text.

However, when using the title tag this plug-in removes it from the element, making it impossible for the tooltip to appear when the mouse is over.

javascript jquery html
  • 1

    Modify the plugin so that it uses another attribute other than title would be a viable solution?

  • I thought about it. But at first I don’t know if it would be the most recommended. It’s the Bootstrap Popover.

3 answers

10


In the bootstrap page it is possible to read about the property data-title:

title default value if title attribute isn’t present

What does it mean:

The value of the title if the title attribute is not present.

This means that a solution would be to add the attribute data-title the elements that have the can with the same attribute value title.

You can do this via javascript before calling the startup function. Example:

$(...)
  .each(function() { $(this).data('title', this.title) })
  .popover(options);

1

You can use only CSS for building Tooltips, this way:

CSS 

*{
    font-family: Arial, sans-serif;
}
div > .tooltip, li > .tooltip, a > .tooltip, span > .tooltip {
  opacity: 0;
  visibility: hidden;

  -webkit-transition: 0.3s;
  -moz-transition: all 0.3s;
}

  div:hover > .tooltip, li:hover > .tooltip, a:hover > .tooltip, span:hover > .tooltip,
  a .tooltip:hover, span .tooltip:hover, li .tooltip:hover, div .tooltip:hover {
    opacity: 1;
    visibility: visible;
    overflow: visible;
    margin-top: -40px;
    display: inline;
    margin-left: -40px;

    -webkit-transition: 0.3s;
    -moz-transition: all 0.3s;
  }

.tooltip {
  background: #3378C1;
  color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;

  padding: 10px;
  margin-left: -40px;

  position: absolute;

  font-family: Arial;
  font-size: 12px;
  text-decoration: none;
  font-style: normal; 

  z-index: 10;  
}

    .tooltip:before { /* Triangle */
      content: "";
      background: #3378C1;

      border: 0; 

      width: 10px;
      height: 10px;
      margin-left: 5px;
      margin-top: 20px;

      display: block;
      position: absolute;

      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);


      display /*\**/: none\9;
      *display: none !important;
      *display: none;
    }


**HTML**

<html lang="pt-br">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<br>
<br>
  <p>Este é exemplo demonstrativo de utilização de 
<a href="#"><strong>Tooltips</strong>
<span class="tooltip">
  Clique aqui e abra este link 
</span></a> 
e com isto fornecer mais uma ferramenta para seu website.</p>

Take a look at the working example here.

  • This link has only the result, put in your answer the code and a brief explanation, the stackoverflow works different from a forum, a look at these guidelines: http://answall.com/help http://meta.pt.stackoverflow.com/questions/42/wewant to-responses-containing-only-links/133

  • Sorry for the ignorance, I explained the same example in Codepen: http://goo.gl/MoeUlT

  • I saw your code and found it very good. Congratulations! In the link the positioning of the box with the tooltip does not appear on top of the content, it is stuck in the left margin... this does not happen with vc?

0

You can customize the options when you initialize the Popover and return the title attribute to the original value.

$('a').popover({
  container: 'body',
  html: true,
  template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
  content: function () {
      $(this).attr('title', $(this).attr('data-original-title'));
      return $(this).text();
  },
  placement: 'auto right'
});

Example: http://jsfiddle.net/gilbarbara/6jd2U/

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.